Smashing Magazine - we smash you with the information that will make your life easier. really.
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:
[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]
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)
Lee Munroe is a freelance web designer from Belfast. You can see his other writings on web design on his blog.
- 167 Comments
- 1
- 2
February 26th, 2009 1:51 pmThanks for the tips and list of great websites.
- 3
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.
- 4
February 26th, 2009 1:54 pmyes, they are perfect.
Im totally amazed ! - 5
February 26th, 2009 1:54 pmAnother great one for in the book!
- 6
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!
- 7
February 26th, 2009 2:03 pmCould I asked, from where did you get these portfolios? Any website gallery?
- 8
February 26th, 2009 2:05 pmGreat article guys at SM. I’ll pass it along via twitter. @bobbyburdette
- 9
February 26th, 2009 2:06 pmGreat article, I am going to incorporate these on my personal site. Thanks!
- 10
February 26th, 2009 2:07 pmGreat article SM! already retweeted!
- 11
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!
- 12
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
- 13
February 26th, 2009 2:10 pmVery Nice Article Lee…. I like the details.
DKumar M.
- 14
February 26th, 2009 2:11 pmnice article good tips thanks..
- 15
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.
- 16
February 26th, 2009 2:15 pmGreat Portfolios!!
Just might take some pointers here and there…
Thanks SM!!
- 17
February 26th, 2009 2:18 pmGreat post, am in the process of building my portfolio myself >.<
- 18
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
- 19
February 26th, 2009 2:36 pmThanks, have my portfolio up recently and it needs improvements!
- 20
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.
- 21
February 26th, 2009 2:51 pmGreat article Lee, nice one, some quality ideas and showcase sites.
- 22
February 26th, 2009 2:53 pmgreat list and advice
- 23
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.
- 24
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.
- 25
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. :(
- 26
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.
- 27
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.
- 28
February 26th, 2009 4:06 pmTimely and appropriate – thanks against for your efforts, SM! :D
- 29
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
- 30
February 26th, 2009 4:39 pmLee, thanks for the mad props! Always a pleasure to see my work out and about.
- 31
February 26th, 2009 4:42 pmGreat tips and very great list, most of them are my idol
- 32
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.
- 33
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:
- 34
February 26th, 2009 6:27 pmNow I have so many ideas I’m creatively paralyzed. Thanks Smashing Magazine?
;D
- 35
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
- 36
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
- 37
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. :)
- 38
February 26th, 2009 7:58 pmThank you for this. Very informative. Kind of self-help without the drama. :)
- 39
February 26th, 2009 8:09 pmHi
all are good tips and great websites. - 40
February 26th, 2009 8:19 pmThx… Nice article with cool sites….
- 41
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.
- 42
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. - 43
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é!
- 44
February 26th, 2009 10:00 pmThanks so much for featuring my site! Looks like I am definitely in good company :) I’m flattered.
- 45
February 26th, 2009 10:43 pmgreat lists…
- 46
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.
- 47
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!
- 48
February 26th, 2009 11:07 pmThanks for the post! It’s really great source for inspiration! ;)
- 49
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!
- 50
February 26th, 2009 11:18 pmLike this article. Thanks for writing
- 51
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 - 52
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.
- 53
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 :)
- 54
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. - 55
February 26th, 2009 11:52 pmThanks for this article and nice list!
- 56
February 27th, 2009 12:23 amI should change my site after this post
Stop thinking start doing )) - 57
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.
- 58
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
- 59
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.
- 60
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. - 61
February 27th, 2009 1:14 amAll pretty obvious stuff.
The gallery of portfolios is interesting though.
- 62
February 27th, 2009 1:33 amGood tips.
Thank you. - 63
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!
- 64
February 27th, 2009 1:53 amNice Article…… Thanks 4r the tips
- 65
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!! - 66
February 27th, 2009 2:10 amnice tips, there’s a lot to do now.
- 67
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
- 68
February 27th, 2009 2:24 amAye Smashing, talk about validation…hehe
- 69
February 27th, 2009 2:37 amwow nice one.
- 70
February 27th, 2009 2:39 amgreat article!
what do you guys think should portfolios be in english or in your mother tongue? - 71
February 27th, 2009 2:44 amthx again! have to re-do mine as well.. :)
- 72
February 27th, 2009 2:54 amwow, nothing new.
- 73
February 27th, 2009 2:57 amWow very useful !
Ty SM ! - 74
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. - 75
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.
- 76
February 27th, 2009 3:43 amLooking good Lee! Really good pointers here to follow
- 77
February 27th, 2009 3:56 amGreat article, I’m currently building my portfolio, this helped me.
- 78
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. - 79
February 27th, 2009 4:10 amThanks for you article. Learned something new.
Reading it was like motivation for me! - 80
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 ;)
- 81
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!
- 82
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 !) - 83
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!
- 84
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.
- 85
February 27th, 2009 5:41 amWhy do all those portfolios look alike….
- 86
February 27th, 2009 5:51 amNice tips. Very useful. Should come in handy for my next design of pushingbuttons.net
- 87
February 27th, 2009 6:05 amAWESOME!!! Thank you!
- 88
February 27th, 2009 6:15 am10 step to have a portfolio like everyone else would be a more apropriate title
- 89
February 27th, 2009 7:02 amvery good!
- 90
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
- 91
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.
- 92
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.
- 93
February 27th, 2009 8:57 aminspirational!
- 94
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!
- 95
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
- 96
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.
- 97
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?
- 98
February 27th, 2009 9:53 amTrends > creativity.
All your steps are obvious.
Nothing new on Smashing.
- 99
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! :)
- 100
February 27th, 2009 10:08 amFantastic stuff.. Just when I am about to go Freelance.
Cheers :)
- 101
February 27th, 2009 10:12 amThanks a lot. A very useful post. I’m missing a bit some more portfolios of female deasigners. And yes, I’d like to see a “what inspires me” site with favourite links as “role model” ideas as sometimes you cannot work on what your higher goals are. But I guess this could link to your favourite blog posts.
Tanja burgdorfer alias mayari
- 102
February 27th, 2009 11:03 amI think one of the most important aspects of this is to use social networking tools. Very important.
- 103
February 27th, 2009 2:45 pmthnks dood, this couldnt have come at a better time i’m right in the middle of making mine now…
- 104
February 27th, 2009 2:46 pmUmmmm… where to begin?
1. Logo. Sure. Whatever. Why not the middle? Hell, one of my favorite portfolios has it on the upper right. You’re a designer, you should be able to make anything look good.
2. Tagline. Good idea, but for fuck’s sake don’t start out your introduction with ‘Howdy’ or ‘Hi there!’ You are not there, and your clients are probably not from the southwest.
3. Portfolio. Yes yes yes yes, clear, high-quality images and active links only.
4. Services. Tacky, but probably good for SEO – don’t use fucking checkmarks for christ sake though.
5. About me. Location is always useful to know, but unless you are very attractive keep your terrible, trendy haircut off your potential client’s screen.
6. Contact. Your e-mail address and number should be right there on your home page. Anything else is pretty superflous. Contact form pages are not only a hallmark of a bygone era where webmail barely existed but they are unreliable. Let people compose and autosave their shit in gmail.
7. Blog. No. No. No, unless your blog is your portfolio/recent work. Your clients don’t care how you make rounded corners as long as they work.
8. Call to actions are for banner ads, not your fucking book.
9. Social Network Profiles. Same thing as your haircut. Probably not very interesting, and really doesn’t do much visually for the page.
10. Copywriting is an extremely overlooked part of web design, as shown by this article and this example. Under no circumstance, should you ever say ‘What’s up?’ in your portfolio, and “web standards” is two words.
- 105
January 4th, 2010 9:40 amAh, Gordon – I agree with everything you say but the contact form, I still think it is a nice element to have, might make it easier for people to add comments quickly.
Showing off the portfolio as a blog is probably the best use for the blog. I you can add broad vision creative ideas once in a while, that might get plus points as well..
I also agree with the note on Copywriting – David Ogilvy’s books, as well as others like him are highly recommended by me, I read them daily…
- 105
- 106
February 27th, 2009 5:09 pmThanks for the awesome post!
- 107
February 27th, 2009 6:22 pmHoly crap. This is all wrong.
I’m not visiting any one of those websites, and I’d never work with any of those people. Why? Because they’re trying to wow me with their website – not their work/thinking, they’re all the same website essentially (same formula), and every single one of those websites are the result of trends and not thinking. Differentiation and great work is key. Let’s please understand this now.
- 108
February 27th, 2009 6:48 pmWell done… these articles continue to inspire my design work. great work!
- 109
February 27th, 2009 11:46 pmHello SM,
Today i am very happy and Thank you lot accepted me as your eligible user of you site. and Its such an honor to be here.
Thanks for all the comments
@Chikezie Ejiasi :- Thank you so much you like my site as well your site also gr8 and creative look
My Blog is : http://www.cjscreativemall.com/
Thanks again SM
- 110
February 28th, 2009 2:49 amPlease use “Go to Top” link just above the contact form, it’ll be convenient to your visitors.
- 111
February 28th, 2009 4:45 am@Gordon – I agree.
- 112
February 28th, 2009 6:14 amFantastic article!
- 113
February 28th, 2009 6:37 am@Gordon fair comments and I just don’t coincide with you at #7 and #8.
I think it’s very important to have references, and in the case you target being contracted by a client or a creative agency, it’s nice to show, in some way, you have them. Here that ‘friends links’ I was talking about (93) also suits.
Of course it depends on the content you put at your blog. If I wanted to contact a designer for a comissioned work or as a partner in some project, I’d love to see more of his creative process, and maybe know further about his experience dealing with clients, getting into visual communication events, posting interesting news and discussions concerning his field and so on… it would surely show me he enjoys what he does and keeps increasing his references. And, as Lee Munroe says, “prevent your website from lying static”.A portfolio I ended up visiting on daily basis was Fabien Barral’s Graphic Exchange. I might have visited his portfolio once or twice but what made me put a link at my bookmark bar was the great quality of the references he posts and how often he updates it. Once in a while he posts personal work, besides the fixed link, and I’m sure he has many many loyal users like me taking a look at it when he does.
I also like the way Bosque, for example, puts some personal pictures at their site. They write literaly ‘Life’ at the menu, even already having a blog linked, and present random pictures of people, personal work and everyday images and fun. The client looking at that may like it or not, but if he does like and hire them I’m sure the workflow will suit their personality much better than if the client haven’t seen it before.
And the ‘Call to actions’, working as a ‘next step’ was the most relevant topic this post bought to me! I definetely put it in consideration now on.
- 114
March 1st, 2009 5:27 amHere’s another good web designer portfolio site to check out- http://www.jeremyamaral.com
- 115
March 1st, 2009 5:30 amAWSOME! really cool article!
- 116
March 1st, 2009 6:14 am10 Steps To The Perfect Portfolio Website infrench here -> http://blog.gaborit-d.com/10-etapes-pour-un-site-portfolio-de-qualite/
- 117
March 1st, 2009 7:27 amGreat post very inspiring
- 118
March 1st, 2009 9:36 amAmazing portfolios, im building my own.
I love design, but what about when you have to include some dynamic content to your page, enough to be important but no so bigger to be used like a blog?
Whats your favourite CMS or news script to add dynamic content to your pages?
Lets work together designers of the world! :)
- 119
March 1st, 2009 10:53 amThis is why I don’t suggest people hire “designers” because the best work they will ever do is their own portfolio. Case and point, all the examples were of web designers. Ever think that more than web designers use the Internet or care about design? Get out of your bubble once in awhile.
- 120
March 1st, 2009 12:17 pmIncredible article!
- 121
March 2nd, 2009 12:15 amvery useful, thanks. and so clearly chunked down. very good work!
- 122
March 2nd, 2009 4:52 amThanks very much for showcasing my site. I feel very proud to be featured.
- 123
March 2nd, 2009 5:41 amjust don’t forget that the main idea is to show your work to others
- 124
March 2nd, 2009 1:05 pmsome great examples.
- 125
March 3rd, 2009 5:04 amGreat sites!
A piece of advice: Some of you are proudly stating that your sites are validated XHTML, CSS, etc. Unfortunately some of these designs also break in Internet Explorer 7, which is still the most commonly used browser out there.
Idealism is good, but pragmatism is what most companies need, to keep all of their users happy (non geeks included). Make the nescessary hacks for IE, and Bob’s your uncle. - 126
March 3rd, 2009 7:22 amThanks! I have to complete a portfolio website by next week in class, you guys always seem to release the best articles!
- 127
March 3rd, 2009 9:21 am115: Blair
This is why I don’t suggest people hire “designers” because the best work they will ever do is their own portfolio. Case and point, all the examples were of web designers. Ever think that more than web designers use the Internet or care about design? Get out of your bubble once in awhile.Interesting. Who then, would you suggest a professional, image conscious company should hire to design a website if not a graphic/web designer?
- 128
March 3rd, 2009 12:06 pmGreat Stuff.
Really gives Inspiration. Thanks! - 129

- 130
March 3rd, 2009 2:02 pm@Gordon, haha, i can see why your such an angry man, thats a lot of big talk and advice from a man who’s own website is so poor, and desperately trying to be different and trendy.
Get a life - 131
March 4th, 2009 10:45 amGamer??
“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.”
Confused, not sure what type of portfolio site a gamer would have. But, I confuse easily. Nice writeup ;)
- 132
March 4th, 2009 11:42 amI’m a bit surprised by some of the negative comments… I will agree that people don’t always agree what is a good design, and personal tastes will vary. Some of the points seem to follow current trends, but often these are trends because they work and are good ideas.
“115: Blair
This is why I don’t suggest people hire “designers” because the best work they will ever do is their own portfolio. Case and point, all the examples were of web designers. Ever think that more than web designers use the Internet or care about design? Get out of your bubble once in awhile.”I would hope that a designer’s portfolio would be some of the best work they do — it’s one of their most vital selling points. Who is going to hire a web designer whose personal site doesn’t leave a good impression?
Thanks for the links Smashing Mag, I used a couple of these when I redesigned my portfolio earlier this year.
- 133
March 5th, 2009 2:23 pmI’m I already followed most of this advice but it sure would have been easier had this blog been here 2 years ago!
- 134
March 6th, 2009 7:57 amI don’t care what Gordon says, these are great tips for those that are still learning and need a bit of help understanding what to add on their website. Great article!
- 135
March 6th, 2009 10:20 amAbsolutely agree with Benjamin, I don’t understand the negative comments, design is so subjective. A portfolio should reflect the deisgner creating it, most of the designs in his/her portfolio often are directly influenced by the client, so the portfolio is a good vehicle to stamp your own mark/style, all the design decisions made are made yourself without any influence or direction from the client, hopefully resulting in a piece of work that is truly your own.
- 136
March 6th, 2009 3:40 pmI am so glad you have this posting. My portfolio website needs a major face lift. This article sparked some inspiration to start changing my website and is a great aid in doing so. Thanks!
- 137
March 11th, 2009 10:25 pmWhat if you have multiple talents? I mean, you want to show what you’re best, the trade you’ve learned but you still want to show that you have learned on your own other styles, mediums, or types whether it’s in the arts or not.
- 138
March 20th, 2009 11:14 amI tried clicking on designmovesme site and was warned of a virus within the website. Just wondering if anyone had the same issue?
- 139
April 16th, 2009 12:26 pmWe would like to get your website on first page of Google. All of our processes use the most ethical “white hat” Search Engine Optimization techniques that will not get your website banned or penalized. Please reply and I would be happy to send you a proposal.
- 140
April 27th, 2009 12:43 amGreat Collections..
- 141
May 4th, 2009 4:47 amsuper awsome ideas deffffffffffffffff liked the one ps. email me some more cause my computer broke down
- 142
May 6th, 2009 3:56 amVery Very good Site yaar, Just Amazing portfolios
- 143
May 20th, 2009 12:03 pmGreat Inspiration for my own portfolio site, Thank You
- 144
May 20th, 2009 11:20 pmVery useful tips. I enjoyed reading your post. Thank you.
- 145
May 29th, 2009 4:31 amThanks a lot, I’m redesigning my website right now and this is pure gold. (:
- 146
June 8th, 2009 11:20 pmWoooooooooooW
- 147
June 18th, 2009 6:51 ami love horizontal portofolio site
- 148
June 18th, 2009 9:51 amПросто замечательно – очень интересные мысли. Разжевано специально как бы для меня :)
- 149
July 20th, 2009 2:35 amEXTREMLY useful! I love this post, thank you very much!
I can now start thinking of making a portfolio on a good base. :) - 150
July 20th, 2009 12:16 pmvery nice thread. great examples of some beautiful work.
for those designers who are less saavy with programming and design, deviantart offers its own free portfolio tool now. it offers enough customization for the sophisticated user, but adheres to the simplicity that art buyers look for when reviewing thousands of sites in a day.
love to get everyone’s feedback on the set-up wizard and the design:
portfolio.deviantart.com - 151
July 29th, 2009 5:08 amThe FREAKIN BEST thing I’ve ran into so far!!!
So simple, very informational, perfectly composed!!!
Thumbs UP!!!!
PUURFECT!!!
- 152
July 31st, 2009 1:14 pmThank you very much for such a useful post. I’ve been looking all over trying to gather research for my new portfolio site and this article has proved very helpful.
- 153
August 9th, 2009 11:42 am“In the Western world, we read from left to right”…So Israel is part of what? China?
- 154
September 8th, 2009 3:48 amreally very nice design……………..superb!
- 155
September 21st, 2009 11:18 amThanks guys. This article played a big role in how I redesigned my site.
- 156
September 24th, 2009 12:13 pmReply to I Hasson,
“I think SM needs a face-lift…current design has been on long enough.”
No need to fix something that isn’t broken. Their website is very well made.
Also thanks for the tips/showcase SM.
- 157
October 27th, 2009 7:52 pmThese are some great tips. I think people overlook the fact that they need an “about me” page on their site. Commonly, I see portfolio pages that fail to give the user a little information about them. I also, think is very important to include social networking site. Let’s face it everyone either has a facebook, myspce, linkedIn, twitter, youtube, ect. It gets people talking, too. You are really limiting yourself if you fail to put these on your web site. I have been freelancing for about a year now and have implemented all these tips into my website.
On another subject I failed in getting a lot of jobs early on in my career when I would got to GetAFreelancer and bid on different design projects. I could spend 24 hours and only get 1 project if I was lucky, and waste a handful of days. I hate sites like that! Luckily, I have found site where you can actually get in direct contact with clients for projects via email or telephone.
- 158
November 19th, 2009 6:39 amGreat article. I’ve referred friends to this many times. I still wonder how personal verses how professional to make your portfolio site. For instance, on my site (http://www.glennsorrentino.com) I had on my homepage a photo booth style strip of pics of me to make it more personal then I switched to pics of my work, now I’m trying for both. Any thoughts?
- 159
November 26th, 2009 3:26 pmI must admit…
BEST tips I have ever read on the topic..period - 160
December 6th, 2009 3:08 pmI love how Chikezie Ejiasi’s Nine Lion website is featured in every single web design and portfolio round-up and yet the only page that validates in his whole site is his index page.
Adding a “valid html’ link at the bottom of every page is so misleading when the link only validates the main page….FYI here’s the link you need to use for validation of a specific page: http://validator.w3.org/check/referer
But he probably knows that.
Anyway great site regardless…. just saying.
- 161
December 20th, 2009 4:24 pmbest article so far:)
funny though that i needed more time to read all those comments than i needed for article:D
and i didnt jet check the webpages! xDbut yes, i too need a portfolio, and so far i discovered i dont really want to bring it up because of the clients, but because of the picture or brand (named it as you like) that i present, things i am experimented with. like a somekind of report what i have done/ am doing and what i should do in future and where i really wanna go with my aims/goals.
thats why is good to “know your potential client”my case is that i wanna do graphic design like prints, type, logos, ilustration, etc. but so far i ve been extra experimental with photos.. so yes. its nice to discover at least this that i ll push myself in right ways:)
and i do agree some of this 40 sites are almost the same:)))
and i hate this “hi i am xxx designer xx and i am soooo goood and u gonna hire me no matter what”. it looks like you wanna sell ur mother just to get this job. we are not so depressed, are we? designer should have his own pride.right designer shouldnt accept every chance to work. maybe in the beggining of carrer, while you search for practice, but then they learn to not accept everything. designer should enjoy in their work. and you cant enjoy in all of them:) try to find inspiration at http://www.sagmeister.com/index.html
and just to remind: there are artistic frelancess too. and i dont think that they should have basic site with logo on upper left corner;)
hum what else..
dont be fake. be yourself. be you:)) and find what you want from your client;)AND YEAH
gordon rocks!!
- 162
January 9th, 2010 1:19 pmGreat article, I’m going to keep these in mind when I re-design my portfolio.
- 163
January 13th, 2010 8:34 amThanks for the great article! I followed your steps: This is the result: my new portfolio website.
Thanks!
- 164
January 15th, 2010 11:34 amjust wondering if anyone knows of any good “anti-spam plug-ins” to use instead of a Captcha? Or maybe good code to block the spam searches? I did not have my site live for more than 24 hours and all I get is spam.
- 165
January 16th, 2010 3:19 amHi,
This is inspiring; I am very pleased by this post. Nice info at this post thanks!!! I really like it
- 166
January 28th, 2010 10:03 pmI like the Portfolio’s and It would really very helpful for me and others to get the taste of current trend and style.
- 167
February 9th, 2010 7:43 amHaving been a freelance web designer for 2.5 years now, and having a current site that ticks a lot of the boxes mentioned in the article, I’m going to stick my neck out and say most of what’s discussed here is wrong.
I’ve learned that the most important thing you need on your site isn’t anything about you. The most important message is what you do for your clients; how you will make their business successful. You need to stop thinking in design terms, and start thinking in business terms.
Get your business message, your best portfolio items and an easy way to contact you on your homepage. Leave all the “me, me, me” to your secondary pages — most clients will never read it anyway.
My current site fails on these counts so my redesign will be addressing this. I suggest other designers follow suit — stop with the ego masturbation and start selling proper business solutions. You’ll get much better clients when you do.
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- We’re Ready for CSS3, but are we Ready for CSS3? - http://bit.ly/cKN7Bz
- lovely-css: a grid-based CSS framework - http://bit.ly/ayA0wb
- How The CSS Selector nth-child Works - http://bit.ly/cgPMqe
- 33 New High Quality Adobe Illustrator Tutorials - http://bit.ly/bTgFbu
- How to Drastically Improve Your Designs - http://bit.ly/a9L1sb
- A Quick Look at Mobile Web Designs - http://bit.ly/9TCWCG
- How to Test your JavaScript Code with QUnit - http://bit.ly/da853c






















































































(2 votes, average: 4.00 out of 5)
Great article. Thank you! :-)