10 Steps To The Perfect Portfolio Website
You may have a personal portfolio website for a number of reasons. If you’re a freelancer, then you’d need one to showcase your work and allow people to contact you. If you’re a student (or unemployed), then you’d need one to show prospective employers how good you are and what you can do, so that they might hire you. If you’re part of a studio, then you might use one to blog about your design life, show people what you’re doing and build your online presence.
A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you’re a Web designer, developer, writer, gamer or any other type of creative, then it’s essential that you have a good portfolio website.
You may want to take a look at the following related articles:
What makes for a good personal portfolio website?
1. Logo
Your logo is usually the first thing a user sees. In the Western world, we read from left to right, top to bottom, so it makes sense to put your logo in the top left of your website so that users can immediately identify who owns the website.
It doesn’t necessarily have to be your name, but if you’re trying to promote yourself online, then it’s a good idea to go by your name. And always link your logo to your home page. It’s a common convention that users expect online.
Mohit goes by the alias of CSS Jockey.
Jason Reed uses a signature-style logo of his name.
2. Tagline
Once the user sees who owns the website, they’ll want to know what it is you do. This is where you explain what you do with a tagline. Your tagline should be short and snappy, summarizing what you do.
Things to ask yourself when writing your tagline:
- What are you? A designer? A writer? A developer?
- What do you do? Design websites? Develop games?
- Where are you from? Country? City?
- Are you a freelancer or do you work for a studio? Are you looking for work?
Sarah Longnecker makes it clear that she puts together videos and is good at it.
3. Portfolio
This is a personal portfolio website after all, so your portfolio will determine whether the website is interesting or not. People will want to see your previous work to decide whether you’re good or not and for general interest, to see what you’ve been up to in the past.
Depending on what you do, your portfolio should contain big high-quality images, clearly accessible to the user. Always include a link to the live version of the website you worked on, and link your screenshot to the live version (another common convention that people expect). Include a short description for each project, including the different skills that you needed to complete the project.
It’s never a bad idea to get a testimonial from a client. Your visitors might also be interested in the stages of development for your projects and how you arrived at the final outcome.
Leigh Taylor displays nice clear screenshots of previous work and indicates what software was used during development.
4. Services
Your tagline summed up what you do, but you’ll want to go into a bit more detail here about each service that you offer. You can’t expect potential clients to guess what you do based on your portfolio, and you don’t want to leave them wondering whether you offer a particular service or not.
Make it clear, and break it down: Web design, development, video, copywriting, branding, etc. You may want to be even more specific: corporate branding, church website design, Flash banner ads and so on.
Chris Spooner clearly indicates the services he offers for both print and Web.
5. About me
It’s all about you. Let people see the man or woman behind the mask (i.e. website). Share your background, where you came from, how many years you’ve been in the business, etc. The more details you give, the better your users can form a bond and build trust with you.
If you’re not camera-shy, show a picture of yourself. This will give potential clients peace of mind by allowing them to see who they’re dealing with, and it adds an element of trust.
Don’t be afraid to show off your awards and recognition here. You want people to know you’re good at what you do.
Chikezie Ejiasi shows us a photo of himself and even lets us know how to pronounce his name.
6. Contact
This is one of the most important elements of a portfolio website but is often hidden or even neglected. A potential client has browsed your website, is impressed with your portfolio and can see who you are. Now they want to hire you.
Your contact information should be obvious and easy to access; don’t hide it in the footer. Let people know they can contact you for a quote or a chat. Use a form to make it easier for users to contact you (so that they don’t have to take down your email address and then open up their email manager). A form also allows you to ask for specific information, such as name, email address, website URL, details of inquiry.
Stuart Johnston offers clear contact details throughout his website but also provides an easy-to-use contact form.
7. Blog
A blog is always a good idea. Blog about your area of expertise; show you know what you’re talking about. It will help promote you and prevent your website from lying static.
Let people follow you by subscribing to an RSS feed, and show off your most popular blog posts to new readers.
Be sure to enable comments for feedback. Don’t make users register to add a comment to your blog, and don’t use anti-spam Captcha software, which only turns people off from commenting. There are plenty of anti-spam plug-ins available that don’t require users to do extra work.
Chris Wallace uses his blog about Web design-related topics to help out other people in the industry and to engage in discussion.
8. Call to action
Ask yourself what you want to get out of your personal portfolio website. Do you want to be hired? Attract more blog readers? Maybe you just want people to know who you are.
Each page should have a call to action, a “Next step.” The best way to accomplish this is with a “call to action” button that is clear and stands out from the rest of the page. Link it to your blog, portfolio or contact page, and use appropriate language (e.g. “Hire me,” “Request a quote,” “View my portfolio”).
Matthew Brown’s call to action is a contrasting button that stands out from the rest of the website.
9. Use social networking websites
Now that people have an interest in you and your work, encourage them to follow you on other websites. Make it clear that they can follow you on Twitter, Facebook, Flickr, LinkedIn, etc. Make the most of social networks and have a group of friends to call on if needed.
Sam Brown offers clear links to other websites he uses, allowing us to stalk him.
10. Language and communication
How you conduct yourself is important. Remember, it’s a personal portfolio website, so be personal. You don’t need to sound like a corporate brand with no emotion. Be friendly and personal, but also clear and precise; don’t ramble. Once you write all the text for your website, read it again and see if you can cut it in half.
Marius Roosendaal uses a relaxed and friendly tone on his website.
Other tips:
- Let people know where you’re from. This is always interesting to know, and some clients prefer to work with people nearby or in the same time zone.
- Validation is important, especially for Web designers. If you’re going to be building professional websites for clients, then your own website’s code should at least be valid.
- Link images, not just text. Most people will click on images, expecting them to point somewhere.
- If you don’t have any previous clients for your portfolio, create a WordPress theme, design an icon set, develop a Twitter mashup, etc. You have a lot of possibilities, and there’s a big difference between having one project to show in your portfolio and having none.
40+ beautiful personal portfolio websites
Miki Mottes (Flash)
Cartonblanc (Flash)
<img /> is everything (Phil Thompson)
Spoon Graphics (Chris Spooner)
Johnston North (Stuart Johnston)
Penflare Designs (Sean Farrell)
What do you expect to see on a good personal portfolio website?
Anything important we’ve missed? What would make the difference between your deciding to hire someone and deciding against it?
Further reading:
- 10 characteristics of excellent portfolio websites
- 50 excellent designer portfolio websites
- Creating a successful online portfolio
- 50 beautiful and creative portfolio websites
- Call to action buttons
(al)
Vasil Stoychev
February 26th, 2009 1:50 pmGreat article. Thank you! :-)
Rafie
February 26th, 2009 1:51 pmThanks for the tips and list of great websites.
I Hassen
February 26th, 2009 1:53 pmThanks SM for the great tips! Speaking of which, I think SM needs a face-lift…current design has been on long enough.
Erika
February 26th, 2009 1:54 pmyes, they are perfect.
Im totally amazed !
Bart
February 26th, 2009 1:54 pmAnother great one for in the book!
Bennie Mosher
February 26th, 2009 1:55 pmThese are awesome tips! I am going to use all of them on my new portfolio design. I never thought about alot of these, and just took them for granted!
Thanks for this alot!
Peter
February 26th, 2009 2:03 pmCould I asked, from where did you get these portfolios? Any website gallery?
BobbyBurdette
February 26th, 2009 2:05 pmGreat article guys at SM. I’ll pass it along via twitter. @bobbyburdette
Tim
February 26th, 2009 2:06 pmGreat article, I am going to incorporate these on my personal site. Thanks!
BobbyBurdette
February 26th, 2009 2:07 pmGreat article SM! already retweeted!
Siah
February 26th, 2009 2:10 pmbeen working on my portfolio site lately and this def comes in handy, thanks! and big props to all the designers listed.. awesome sites!
Camilo Oliveira
February 26th, 2009 2:10 pmSome links of the showcase are wrong. They are all linking to Robbie Manson´s website.
Fix it, please ;)
Cheers
DKumar M.
February 26th, 2009 2:10 pmVery Nice Article Lee…. I like the details.
DKumar M.
joyoge designers' bookmark
February 26th, 2009 2:11 pmnice article good tips thanks..
Kevin deLeon
February 26th, 2009 2:13 pmWow…really great list. Very inspirational. Glad to see Elliot Jay Stocks made the list. His portfolio has always been one of my favorites.
Scyfox
February 26th, 2009 2:15 pmGreat Portfolios!!
Just might take some pointers here and there…
Thanks SM!!
Matt
February 26th, 2009 2:18 pmGreat post, am in the process of building my portfolio myself >.<
Siah
February 26th, 2009 2:33 pmbeen workin on my portfolio lately and this def comes in handy.. thanks SM! and props to all the designers listed! awesome work
phiyo
February 26th, 2009 2:36 pmThanks, have my portfolio up recently and it needs improvements!
Digiguru
February 26th, 2009 2:41 pmThis was a great article. I went through several of the sites and noticed that none of them were flash sites. Any specific reason? Perhaps this article should have been titled 10 steps to the perfect css portfolio website.
Greg Wallace
February 26th, 2009 2:51 pmGreat article Lee, nice one, some quality ideas and showcase sites.
LP
February 26th, 2009 2:53 pmgreat list and advice
Karl
February 26th, 2009 2:57 pmCant imagine why you would 1st up showcase cssjockey as an example of a good logo representation? maybe not the best logo work going around in this selection.. Alot of similarities between some of these designs. Nice to see some fresh aproaches among them. Overall a nce post though. Thanks for the time to gather the article.
Tim
February 26th, 2009 3:01 pmI disagree that your portfolio necessarily needs to validate. Yah, I see the benefit, but a portfolio is also a great place to test out some cutting edge stuff that may or may not validate.
Osvaldo Osorio
February 26th, 2009 3:53 pmIncreíblemente inspirado!… Gracias por el necesario recordatorio. Es que a veces si sabes lo que DEBES hacer pero no encuentras esas preciadas horas para darle un buen avance a tu propio proyecto. :(
Renee
February 26th, 2009 3:57 pmThis was a great article, but I disagree about the need to link to a live website. I never link to a live site for the simple fact that my client’s keep their own websites up-to-date, and by week number two, it’s normally not so “pretty” anymore.
Chikezie Ejiasi
February 26th, 2009 4:05 pmThank you for featuring my portfolio, Nine Lion Design! It’s nice to be included in lists like these. I really like the illustrations of Chirag Solanki’s site.
Chris Wilcox
February 26th, 2009 4:06 pmTimely and appropriate – thanks against for your efforts, SM! :D
Jon
February 26th, 2009 4:12 pmGreat article.
One thing you might have mentioned is to try to avoid the overused, cliche tagline a million portfolios seem to be using nowadays:
We (verb) (adjective) (noun)’s
Chris Wallace
February 26th, 2009 4:39 pmLee, thanks for the mad props! Always a pleasure to see my work out and about.
Yogi
February 26th, 2009 4:42 pmGreat tips and very great list, most of them are my idol
Brian Gottier
February 26th, 2009 5:26 pmI’d like to think that my website looks good to prospective clients, but no matter what opinions I hear, it’s hard to say if it’s good or not, especially in this economy.
Michael Locke
February 26th, 2009 5:53 pmGreat list! Nice design work by all. Will definitely archive this post and check out the sites in more detail.
My all-time favorite portfolio site has to be Dave Werner’s 2006 Portfolio site:
http://www.okaydave.com/
jamie
February 26th, 2009 6:27 pmNow I have so many ideas I’m creatively paralyzed. Thanks Smashing Magazine?
;D
max
February 26th, 2009 6:36 pmInspiring collection, nice to see my Leigh Taylor and 9lions featured many times. My favorite of the lot is vlouenco
I do have an issue with portfolio sites that are very busy – i thinkyour own site should leave the center of the stage to the client work you’ve done.
It can become confusing when the designer’s website and it’s content clash.
great job Lee
myows
February 26th, 2009 6:40 pmGreat work Lee, you must have spent a long time compiling this article.
For me, a portfolio must be original and only display your best work – you dont have a long time to create an impression.
I like things to be clean on a white background, like vlourenco or alessandro cavallero’s
Felipe Castillo
January 15th, 2011 4:45 pmI agree with you check out mine yet its still under constuction
Steve
February 26th, 2009 7:45 pmThere’s something to be said for a dark background, especially on sites that are more likely to be surfed at night with the lights off.
Or maybe that’s just me, from getting my start in adult internet. :)
Claudia
February 26th, 2009 7:58 pmThank you for this. Very informative. Kind of self-help without the drama. :)
Abhilash
February 26th, 2009 8:09 pmHi
all are good tips and great websites.
Laxman Koushik
February 26th, 2009 8:19 pmThx… Nice article with cool sites….
Shane Eubanks
February 26th, 2009 8:36 pmWOW! Awesome article, Lee. I wish something like this was available years ago as I slugged along building my own list of website portfolios…this is an incredible rundown. THANK YOU.
floodmixed
February 26th, 2009 8:56 pmI would only disagree with #5. You want people to get their entire first impression of you from
your work alone. You don’t want people judging you on appearances until you meet in person.
You don’t want a client ditching you because you look too young (or old), too cool or too straight
or even too black/white/asian/hispanic/etc.
Musings
February 26th, 2009 9:03 pmLeigh Taylor is listed twice.
Nice article!
Btw, funny to see that: ” Hi, I am so & so and I create/make this & that” seems to be the trend… or cliché!
Claire
February 26th, 2009 10:00 pmThanks so much for featuring my site! Looks like I am definitely in good company :) I’m flattered.
Rajeesh
February 26th, 2009 10:43 pmgreat lists…
Brandon Hansen
February 26th, 2009 10:56 pmGreat work in getting all of these together. I just want to let you know that NineLion is on the list twice. A few of the sites are based on templates too (not sure which came first, the template or the design, which was then released.) Those guys have done a fabulous job in portraying who they are.
It would be interesting to do a study on how effective a portfolio site is in gaining new business.
Roy Vergara
February 26th, 2009 10:57 pmthanks a bunch for featuring my site (Design Moves Me). it’s such an honor to be in such great company. keep the great articles coming!
Creamy CSS
February 26th, 2009 11:07 pmThanks for the post! It’s really great source for inspiration! ;)
Jimbo
February 26th, 2009 11:09 pmGreat article – will try and put some of the tips into effect on my own site!
Some amazing examples – I think Digital Mash and Toby Powell are the two that stand out, but all very good.
Thanks!
ranvier
February 26th, 2009 11:18 pmLike this article. Thanks for writing
Timothy van Sas
February 26th, 2009 11:39 pmGreat read!
Thanks for adding my site to the list, great te be on SM!
Best Regards,
Timothy van Sas
CSSJockey
February 26th, 2009 11:45 pmI’d like to thank you so much for featuring us on your website, in this list. Its such an honor to be here. I tried to stick to the basics the right way when I was designing CSSJockey. And I see that it’s been quite fruitful. Thanks again.
Those are some nice tips and portfolios! Nice work done, putting them up together.
Heiko
February 26th, 2009 11:47 pmYou guys just made my day!!! Thank you so much for featuring my little paiko.de among all these great people up there :)
Manu
February 26th, 2009 11:51 pmThanks for this post, Im freelance Webdesigner, I respect the 1,2 and 3 point.
But I think I must rethink the 4 and 6 point to return it more clearly.
Laurens
February 26th, 2009 11:52 pmThanks for this article and nice list!
Andy
February 27th, 2009 12:23 amI should change my site after this post
Stop thinking start doing ))
David Adams
February 27th, 2009 12:42 amInteresting article with some unique and some predictable portfolios… that being said, my site takes the one-on-one approach which is being deemed as cliché, as noted by Musings, but according to archive.org my version has been around since mid 2006. I would like to think it takes a unique approach, but perhaps not.
jason
February 27th, 2009 12:59 amThanks for this. After years of neglect i’m about to redesign my portfolio site so this article has come at the perfect time. Thank you
Stuart Johnston
February 27th, 2009 1:05 amWhat a pleasant surprise to find my website included in your article.
I’ve been reading Smashing Magazine for ages and it is a privilege to be featured.
Thank you very much.
Danny
February 27th, 2009 1:10 amYea there is a whole lot of similarity going on here, accepted that the vast majority of these sites are following all of the conventions of large type, personal tone, obligatory use of museo (which I love, but time to change) and bold subheadings. In short readers of this kind of article.
Nice list but more diversity would be nice, This is the style of website I always expect to see on smashing, it would be nice to get a suprise once in a while.
PapaJ
February 27th, 2009 1:14 amAll pretty obvious stuff.
The gallery of portfolios is interesting though.
OverZero.it
February 27th, 2009 1:33 amGood tips.
Thank you.
Mke
February 27th, 2009 1:41 amI’m currently building my portfolio, so this has given me a few idea/reinforced some ideas I alreayd had. Thanks!
Shevaa
February 27th, 2009 1:53 amNice Article…… Thanks 4r the tips
Line of Design
February 27th, 2009 2:09 amLine of Design (danish website):
1. Logo – Check!
2. Tagline – Check!
3. Portfolio – Check!
4. Services – Check, Check!
5. About me – Check!
6. Contact – Needs to be clearer! – But Check..
7. Blog – Missing!
8. Call to action – Missing!
9. Use social networking websites – Missing!
10. Language and communication – Needs international language – Missing!
But I’m totally motivated, to get into theese great advises!
Thanks for always motivating and inspiring me to do better and strieve higher all the time!!
maniat1k
February 27th, 2009 2:10 amnice tips, there’s a lot to do now.
Lee Munroe
February 27th, 2009 2:14 amThanks for all the comments, glad to see this post was useful and inspiring.
@Peter: I’ve been building up this collection for some time now via various CSS Galleries, blogs, Twitter links, general browsing etc.
@Digiguru: No reason for no Flash sites. Although it tends to be that personal portfolio sites aren’t generally flash as HTML and frameworks are easier to maintain and of course there’s SEO, accessibility and loading issues. Not that I’m against Flash, there are some great Flash portfolios out there.
@Tim: You’re right, I think as long as you know the reasons it doesn’t validate (e.g. some external JS widget) then it’s fine. Although you shouldn’t have 100s of errors
@floodmixed: Fair argument, it really comes down to your choice whether you want potential clients to know/see who you are before meeting. Although it’s common in this industry to never meet your client, so a picture can add some reassurance
Ruan
February 27th, 2009 2:24 amAye Smashing, talk about validation…hehe
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.smashingmagazine.com%2F&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.606
dams
February 27th, 2009 2:37 amwow nice one.
claude
February 27th, 2009 2:39 amgreat article!
what do you guys think should portfolios be in english or in your mother tongue?
Raph W.
February 27th, 2009 2:44 amthx again! have to re-do mine as well.. :)
balls
February 27th, 2009 2:54 amwow, nothing new.
Jonathan MOREL
February 27th, 2009 2:57 amWow very useful !
Ty SM !
Grant
February 27th, 2009 3:39 amOr if you’re an IA/Interaction designer with little graphic design skills, the site could
be very plain, but highly usable. My clients don’t mind this at all.
It seems the cat is still not out of the bag among GD’s on the single biggest
way to boost traffic to your website – Its pretty obvious, but heck I aint gonna say
what it is – then Id lose my advantage! It has to do with keywords and metadata.
Leigh Taylor
February 27th, 2009 3:40 amThis is a great article Lee and to be honest some of the points i could incorporate into my site when i get round to it.
Oh yeah i am showcased twice which i obviously wouldn’t complain about lol but wouldn’t want anyone thinking there is preferential treatment.
Great roundup too and list of fantastic portfolios, bookmarked solely for the quality of the article. Well done.
Liam
February 27th, 2009 3:43 amLooking good Lee! Really good pointers here to follow
Web Gallerie
February 27th, 2009 3:56 amGreat article, I’m currently building my portfolio, this helped me.
Aartjan van Erkel
February 27th, 2009 4:02 amLee, thanks for this brilliant post.
I am having my freelance site and blog redesigned and your tips and examples are very inspirational.
Mike
February 27th, 2009 4:10 amThanks for you article. Learned something new.
Reading it was like motivation for me!
GO
February 27th, 2009 4:32 amWow! I haven´t seen all the portfolio websites, but some of them are really cool! Thanks for sharing with us designer such good thing ;)
Alex Wilks
February 27th, 2009 4:37 amThis is why I love SM- it always seems to publish articles at the right time. This is exactly what I’ve been looking for the last couple of days!
DeadPixel
February 27th, 2009 4:46 amThanks a lot, I’m currently working on my portfolio so it helps a lot :)
It’s in french, but you can check the beta : http://beta.deadpx.fr (click on any link to experience the JS navigation !)
Tom Bradshaw
February 27th, 2009 4:54 amSome great examples. My personal website definitely needs a revamp, I threw it together at the very end of my Graphic Design course. Now I’m a full-time web designer I just haven’t had the time. Now I’m feeling alot more inspired!
Wade Jackman
February 27th, 2009 5:04 amgreat tips and good timing. I’m trying to redesign my portfolio, although I never seem to have the time.
bjorn
February 27th, 2009 5:41 amWhy do all those portfolios look alike….
Timothy
February 27th, 2009 5:51 amNice tips. Very useful. Should come in handy for my next design of pushingbuttons.net
kelley
February 27th, 2009 6:05 amAWESOME!!! Thank you!
Karnius
February 27th, 2009 6:15 am10 step to have a portfolio like everyone else would be a more apropriate title
schrottplatz
February 27th, 2009 7:02 amvery good!
Akk3d1s
February 27th, 2009 7:04 amThese sites aren’t that “good looking” to be honest. I only liked cartonblanc. The rest of these sites have cliched designs… Well that’s just my personal opinion…. The tips though is good
Xaga
February 27th, 2009 7:40 amGreat tips ever! I don’t want to say that I don’t have time. (I thought It’s just an excuse) after reading this I felt so inspired and fired up to finish my portfolio site.
Paula Azevedo
February 27th, 2009 8:40 amHi!! Nice post, the theme is surely interesting for us visitors and essencial points were taken.
I’m really glad to see Mopa listed (they rock!!) although I prefered their old site. And other brilliant brazilian designers! \o/
The point I don’t agree with is about the social networking sites (#9). I don’t really see the advantage on posting so many of them. If the idea is to show other aspects of your life I think this is not the best way to do it.
Of course I enjoy very much when I see a link to Flickr. It is a great tool show creative process, alternative versions, sketchs (but please, avoiding to repeat the same works already presented!!) and stuff. It will atract the visitor if he is interested enought to see more pieces of your work and able another contact way to other flickr users. In this way it’s highty recommended.
About the rest of them, isn’t it better to have your site link added to your profiles rather than the contrary?
What I think it’s missing in the list is a link session, like ‘faves’, ‘friends’, ‘respect’… It’s a nice way to present yourself as part of a networking, to show you are participating and have interesting contacts at your field. Also to be grateful for those who may have helped you and increase friendship with other professionals. Trading spontaneous links helps to promote yourself and is great for visitors who are looking for similar kinds of work.
Hugs.
James
February 27th, 2009 8:57 aminspirational!
Michael
February 27th, 2009 8:59 amGreat article. I was wondering if you could possibly elaborate on the Blog portion. Like possibly give us some links to blogging software and anti-spam software we could use to help us get started.
Thanks!
nomad
February 27th, 2009 9:08 amI’m due for a major re-design, overdue in fact and this goes a long way to giving me some inspiration and a few healthy tips. Nice one Smashers
Ryan Carlin
February 27th, 2009 9:32 amJust after ive finished designing my portfolio site for uni…typical!
This is great and will help me tweek my design.
Jamie
February 27th, 2009 9:36 amI have a question based on this article – I do two things, web design and compose music. I currently have two sites for this. I think it’d be great to have one “Jamie” site with all of my artistic stuff in one place, plus a blog about those things. Is this feasible? Any ideas?
malau
February 27th, 2009 9:53 amTrends > creativity.
All your steps are obvious.
Nothing new on Smashing.
jayh
February 27th, 2009 9:59 amGreat article – funny thing though. You say you should make sure your web pages are validated, but I got 270 errors when I ran this page through the link you provided… lol! :)
Malcolm
February 27th, 2009 10:08 amFantastic stuff.. Just when I am about to go Freelance.
Cheers :)