5 Tips For a Better Online Portfolio
You can’t get away from the web these days, regardless of your profession. Even non-web freelancers find quickly that that a website is not only expected by clients, but a critical marketing tool.
How can you make your website better? Run through this list of tips and see if you can use them to improve your website or online portfolio.
1. Be Accessible. Make sure that your site can be accessed by a variety of users. There’s nothing wrong with flashy graphics and fancy Javascript effects on your website, unless they are stopping users from accessing your stuff.
- Use CSS to style your content, and keep the use of
tags to a minimum.
- Make sure your (X)HTML validates.
- Build your site to function properly before adding Javascript bells and whistles
- Use non-intrusive Javascript by using a framework such as jQuery or Prototype and Script.aculo.us.
2. Keep It Usable. Your user’s experience on your website is key to them sticking around and contacting you (converting them from a blind lead into a potential client). Be sure to keep key usability concepts in mind when working on your website or online portfolio:
- Watch your font families and sizes. It’s easy to disregard the family or size of a font in Photoshop, only to find later that people can’t view or read it on the web as intended.
- Stay consistent. If your navigation is at the top of one page, make sure it’s at the top of all pages; always avoid confusing your visitors
- Follow the 7±2 Rule: Chunk information into 5-9 groups, any more may overload the visitor’s short term memory.
- If something is important, make sure the visitor can get to it in a minimal number of clicks — a best practice is three clicks or less.
3. Don’t overload with examples. Keep your portfolio limited to your best work. It’s tempting, especially when starting as a freelancer, to list every client you’ve worked for. This is normal — you want your potential clients to know you’ve got paying customers, right? However, it’s best to stand firm. Show 5-7 examples of your best work. Even less if you’ve got some really great content. (Showing too many things in your portfolio increases the likelihood a client will see something they hate! — Ed.)
4. Always tell your visitors what you want them to do. It sounds simple enough but not calling visitors to action is a mistake freelancers often fall into. Short, simple statements that stand out on a page will help incite a potential client to contact you. This can be as simple as a “Contact Us Today” callout linked to your contact form on every page or as intricate as a quick online quote request form. Always opt for letting potential clients contact you through your website (via contact form) over just posting your email address. The less steps they need to take to get in touch, the more likely they will get in touch.
5. Make sure your contact information is findable. So your site is accessibly and people enjoy using it, but where the heck is your phone number?! A contact information page is normally an inherent standard on any website. Take it one step further: put your preferred method of contact on every page and put all of your contact information in your footer. Remember, some clients appreciate an actual phone call over trying to read through your website. A voice and your personality can be much more effective than your website on some clients.
Some Cautions and Warnings
Avoid over-exchanging links. It’s great if you have partners or want to link to some great content on the web, but avoid linking with the sole purpose of generating traffic. This normally results in lower quality visitors and has little to no positive effect on search rankings.
Never spam your link. There are tons of freelancers on the web and clients are looking for quality.
Avoid advertisements. This is your professional website/online portfolio. Unless you’re generating enough traffic and converting enough users with online ads to greatly supplement your income, you should avoid any advertisements.
In summary, use accessibility and usability concepts to allow users to easily get to and use your website or online portfolio. Keep it short, sweet and to the point. There’s no point in overloading a user with too much, your goal should be to keep them intrigued enough to contact you. Finally, be sure to tell them what you want them to do and how to do it. If you prefer your potential clients call you, make sure your phone number is on every page of your website.
When in doubt, take on the persona of a potential client. Think about what frustrates you about other websites and online portfolios and offer your site as the solution — you’ll be cursed with success!
Andy Stratton is the principal of Blue Sky Multimedia and a web entrepreneur focused on accessibility, user experience, and web standards.
3,200 freelancers surveyed globally. In-depth interviews with 10 notable freelancers.
Insights and information you can't afford to ignore!
Find Out More
With over 100 weekly comic strips and counting, Freelance Freedom is an institution around here. Check out of all NC's brilliant work in the archives.
Freelance Freedom Archives
I thought tip #3 was pretty interesting. I see a lot of portfolio’s with 10-20 designs. Some are good, but some aren’t and it makes you think twice about hiring that designer.
Great tips, I have never though of half of these.
Thanks for the tips!
Its easy to over think things then to over do things.
I’m putting a new portfolio together and I’ll make sure it lines up with these tips.
Thanks again!
-waugh
Thanks for this post Andy.
didn’t you guys write the exact same article before?
These points are like…totally obvious…
I belive that #2 and #5 are the most important for a online portofolio. Good article. Thanks.
Valid xhtml is important especially for accessibility. Pretty straight forward, but accurate advice.
@Andy, you might want to check your website. It failed validation on a few pages. Your homepage appears to be a simple extra div tag. Other pages were the contact, support, rfp and feedback. All very simple fixes I’m sure.
one thing i always look out for when viewing a portfolio is the difference in quality between the ‘good’ work and the ‘not so good work’. I often find that some portfolios showcase work ranging from excellent to below average.
If there is below average work on site then it begs the question: what were the factors that made the great work great (ie, did they work with a partner), and can they actually spot the difference in quality between the two?
I would point out that if a designer only has one or two good pieces amid a sea of crap, then they are probably taking someone elses credit. Furthermore, if they themselves cant see the difference in quality, the good work was probably a bit hit and miss anyway, and not something to be counted upon.
Good information, even if some people think it’s “obvious.”
I’d like to make a couple of comments in points 1 and 2. First, everyone should be aware that “accessible” typically means “accessible to the blind,” meaning that the page must read well with a screen reader (which is why images should not be used to display text). There’s much more to accessibility that the items you’ve pointed out, but what you’ve given is a great starting point.
Second, and this is a pet peeve of mine, the “7±2″ rule and the “3 clicks or less” rule are contradictory. For very large web sites (think Microsoft), you either have 5-9 categories per level, which makes the number of levels (clicks) high; or, you cram everything into no more that 3 levels, which requires many more categories per level. For most freelancer’s web sites, this contradiction should not be a problem, but one should not expect to apply both of these rules to all sites in general. IMO, the “7±2″ rule makes a site much more usable than the “3 clicks or less” rule doea.
Yep, The ads on the portfolio site are not cool, and could keep prospect clients from believe in you.
My own experience!
Word of mouth is the best advertising! Its funny how the clientèle snowballs to the point that you soon have to start turning people away.
One thing I think that I would add to this is perhaps that you should have some kind of description, showing your thought process for projects, highlighting your amazing problem solving abilities… but don’t write a book about each project.
Agree with Evan on the word of mouth. But, a caveat: It can lead to complacency. Face it, people have many other things to talk about besides us and our freelance businesses. That’s why it’s important to keep reaching out for new business.
A portfolio is crucial for a freelancer’s success. Thanks for the article.
I think you guys mentioned stuff about portfolios about 2 or 3 times. What happened, no more ideas? Come on guys i know you can find more interesting contend.
@ evan – amen
Great post, but could you also give us some links to a few successful portfolios?
These are excellent tips to keep in mind when building (or rebuilding) an online portfolio. I would have to disagree, or rather offer a caveat, to #3.
If you look at any of the top or “rockstar” designers/artists their portfolio is never limited to only 5-7 pieces of work. They will often have 20+ projects included that cover a wide range of clients, skills, and styles. I think it might be better to suggest that you not put a “weak” piece in among better ones. As long as the projects are labeled well and have a degree of separation (categories, sections that are hidden while viewing other sections, etc.) from each other (you don’t want to dump them all on one page, then you will definitely overload the viewer) then including as much of your work as you deem satisfactory is probably fine. The viewer is in control on your page and can look at as much or as little as he/she wants.
For a printed portfolio that you might carry into an interview, certainly, 5-7 or at most maybe 10 pieces will suffice. However, online, you can use your personal portfolio as a gallery for all of your good work.
Just my two cents. The “no advertising” tip is especially important. With ads on your portfolio you come across as a tacky/bargain basement type of worker, which is something you definitely (unless that is you!) don’t want to project.
@ Norbert: Some cool portfolios here:
http://freelanceswitch.com/designer/9-insane-portfolio-designs-to-make-you-drool/
nice article. yes very true. thanks a lot I love reading it
I’ll have to take exception to #3.
Although I do agree with your point about only showing great work, I think keeping the number finite for an online portfolio is a definite mistake.
If a freelancer is interviewing with an agency for a job, then yes, keep the number of samples to under 10. But for an online portfolio geared to bringing in new clients, show as many (great) samples as possible.
I can’t tell you how many times a prospect has asked me. “But have you designed a brochure for (fill in the blank)?”
Yes, we (designers) all know the same strategy and process goes into designing just about everything, but client’s don’t know that. In which case, if they’re looking to create a brochure and your portfolio doesn’t display any, they will (unfortunately) think you either don’t design brochures or don’t have the experience/skill sets.
This is the same mindsets people have with Yellow Pages ads — they will hire the vendor that specifically displays the service they need.
So if you have 25 great portfolio pieces, then by all means, show them — specially if the samples show diversity in either skill sets (brochures, sales kits, websites, etc.) or industry categories.
Yea – good article – I keep reworking my portfolio but I’m never happy – I think this time i’ll just leave it heh
@Alex Thanks! Glad I could share some insight.
–
@Charles Thank you, as well. Glad you liked it.
–
@TPN No problem!
–
@fredrik I understand what you mean, and I’d like to expand on some items further eventually in the blog I’m building for my redesign.
–
@Casey I definitely realized this too late, after writing the article. My freelance work has taken way too much time from my marketing efforts to the extent that I added a quick jQuery pop-up to my homepage to let people know that I _can_ practice what I preach, even if it doesn’t look like it! The site is 2 years old is in the progress of a FAR overdue face lift (and code-lift if you will).
–
@Jeff Keyser Thanks, I agree, and I only scratched the surface of accessibility, what it means, and where it can be taken. It is a very general term, not just reserved for the blind with screen readers but even includes legacy browsers, mobile devices, physically disabled people who are _not_ blind, as well as search engines.
Another thing I like to point out is that accessibility compliance is almost never _great_ accessibility. It takes knowing your users to hit the mark everytime, I’m also starting to blur the line between usability so I’ll stop here.
I agree with the Microsoft example with 7±2 and 3 clicks. In general, I think it a good practice to chunk sets of information as close to this as possible: 5-9 sections each with 5-9 subsections, etc. There are edge cases in _everything_, and you’ve always got to adapt for your specific scenario, and based on my legacy website, I’m not practicing what I’ve been preaching!
–
@Chris Monaccio – I do agree about and want to emphasize no putting anything weak in the portfolio.
–
@Michael I respectfully disagree with this from my freelance experience. Here a few reasons to explain my point of view:
1. As many of the posts here and white papers on the Internet note, specialization is key. If you’re worried someone will think you won’t be able to design a brochure, you could easily ensure your _best_ brochure(s) are part of the portfolio. Keeping your portfolio limited to a finite number will help you ensure you’re putting the best of the best up there.
2. You want to entice your potential clients to contact you, hence the inclusion of a call-to-action on all pages with your preferred contact method. I have heard a lot of spew over the years about landing pages, search marketing, etc. to get customers to take a desired action. IMHO who cares if they convert via landing page or via the phone number in the footer of the site, as long as they become a customer? For me, the goal is to bait potential clients so that I can get the initial interest, then I can expand on showing them something with more context, once I’ve determined what their needs are.
3. (A little less common:) Many of my designer colleagues have suffered concept/design theft at the hands of potential clients. Put everything you’ve done online, and a client could “borrow” your concept for themselves.
Hopefully that gives more perspective into where I was going.
–
@all: I do want to apologize for the old portfolio on my own site, _eek_. I’m working to get it updated, fix a few things, etc. but have been too busy to get it finished, a good and bad thing!
“Make sure your (X)HTML validates.”
So I tried it for this page (partially because I couldn’t see the image and view source is disabled at work):
http://validator.w3.org/check?uri=http%3A%2F%2Ffreelanceswitch.com%2Ffinding%2F5-tips-for-a-better-online-portfolio%2F%23more-958&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1
Result: 161 Errors, 56 warning(s)
And yes, I did test some pages from my own sites and they all passed…but I don’t have any adds on them, so that makes things a lot easier
With kind regards,
Fred
Thanks! I’ve been thinking on redesigning me portfolio, and I will definitely take your advice Andy.
More Power!
“keep the use of tags to a minimum.”
what? could you please be more concrete. i haven’t heard that one before, unless you mean to advise “write sensible and semantic code.”
Very nice article….it not only applies to portfolio sites but also general best practices for web pages..
Spot on