Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

10 Steps To The Perfect Portfolio Website

Advertisement

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? Link

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.

3
Mohit goes by the alias of CSS Jockey.

Jason Reed uses a signature-style logo of his name.

2. Tagline Link

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?
tag2.jpg4
Sarah Longnecker makes it clear that she puts together videos and is good at it.

3. Portfolio Link

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.

5
Leigh Taylor displays nice clear screenshots of previous work and indicates what softfigureare was used during development.

4. Services Link

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.

6
Chris Spooner clearly indicates the services he offers for both print and Web.

5. About me Link

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.

7
Chikezie Ejiasi shows us a photo of himself and even lets us know how to pronounce his figureame.

6. Contact Link

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.

8
Stuart Johnston offers clear contact details throughout his website but also provfiguredes an easy-to-use contact form.

7. Blog Link

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.

9
Chris Wallace uses his blog about Web design-related topics to help out other people in tfiguree industry and to engage in discussion.

8. Call to action Link

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”).

10
Matthew Brown’s call to action is a contrasting button that stands out from the restfigureof the website.

9. Use social networking websites Link

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.

11
Sam Brown offers clear links to other websites he uses, allowing us to stalk him.

10. Language and communication Link

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.

12
Marius Roosendaal uses a relaxed and friendly tone on his website.

Other tips: Link

  • 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 valid13.
  • 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 Link

Robbie Manson14

Screenshot15

F. Claire Scroggins16

Screenshot17

Timothy van Sas18

Screenshot19

Maru Velázquez20

Screenshot21

Chikezie Ejiasi22

Screenshot23

Miki Mottes24 (Flash)

Screenshot25

Jakub Krcmar26

Screenshot27

Mopa28

Screenshot29

Chris J. Lee30

Screenshot31

Pedro Lamin32

Screenshot33

Leigh Taylor5434

Screenshot35

Alex Coleman36

Alex Coleman37

Sarah Longnecker38

Sarah Longnecker39

Toby Powell40

Toby Powell41

Jay Hafling42

Jay Hafling43

Elliot Jay Stocks44

Elliot45

Tony Geer46

Tony Greer47

Marius Roosendaal48

Marius Roosendaal49

Ryan O’Rourke50

Ryan O'Rourke51

<img /> is everything (Phil Thompson)52

Img Is Everything53

Leigh Taylor5434

Leigh Taylor55

Design Me (Marek Levak)56

Design Me57

Matt Dempsey58

Matt Dempsey59

Brad Candullo60

Brad Candullo61

Andre Augusto62

Andre Augusto63

Rob Hawkes64

Rob Hawkes65

Magnus Jepson66

Magnus Jepson67

Corking Design (Daniel Cork)68

Corking Design69

Evan Eckard70

Evan Eckard71

Alexandru Cohaniuc72

Alexandru Cohaniuc73

Miles Dowsett74

Miles Dowsett75

Andrew Bradshaw76

Andrew Bradshaw77

Shannon Moeller78

Shannon Moeller79

Vitor Louranco80

Vitor Louranco81

Mark Dearman82

Mark Dearman83

Wong Yeng Kit84

Wong Yeng Kit85

Chris Wallace86

Chris Wallace87

Spoon Graphics (Chris Spooner)88

Spoon Graphics89

Fabiano Meneghetti90

Fabiano Meneghetti91

Mark Wallis92

Mark Wallis93

Chris Morris94

Chris Morris95

Paiko (Heiko Brömmelstrote)96

Paiko97

Henry Jones98

Henry Jones99

Winnie Lim100

Winnie Lim101

Greg One (Gregoire Hoin)102

Greg One103

Mark Hadley104

Mark Hadley105

David Appleyard106

David Appleyard107

Design Moves Me (Roy Vergara)108

Design Moves Me109

Brian Murchison110

Brian Murchison111

Mike Precious112

Mike Precious113

Digital Deceptions (Duncan)114

Digital Deceptions115

Chirag Solanki116

Chirag Solanki117

Jason Reed

Jason Reed

Johnston North (Stuart Johnston)118

Johnston North119

Penflare Designs (Sean Farrell)120

Penflare Designs121

Nine Lion (Chikezie Ejiasi)122

Nine Lion Design123

Brian Wilkins124

Brian Wilkins125

Jason Santa Maria126

Jason Santa Maria127

David Hellmann128

David Hellmann129

Dave Lam130

Dave Lam131

Luke Stevens132

Luke Stevens133

James Lai134

James Lai135

Alessandro Cavallo136

Allesandro Cavallo137

CSS Jockey (Mohit)138

CSS Jockey139

Kerry Nehil140

Kerry Nehil141

Darren Hoyt142

Darren Hoyt143

Matthew Brown144

Matthew Brown145

Digital Mash (Rob Morris)146

Digital Mash147

The Things We Make (Mike Kus)148

The Things We Make149

Ed Merritt150

Ed Merritt151

What do you expect to see on a good personal portfolio website? Link

Anything important we’ve missed? What would make the difference between your deciding to hire someone and deciding against it?

Further reading: Link

(al)

Footnotes Link

  1. 1 /2008/03/04/creating-a-successful-online-portfolio/
  2. 2 /2008/11/26/50-beautiful-and-creative-portfolio-designs/
  3. 3 http://www.cssjockey.com/
  4. 4 http://sarahlongnecker.com/
  5. 5 http://www.leightaylor.co.uk/
  6. 6 http://www.spoongraphics.co.uk/
  7. 7 http://www.nineliondesign.com/
  8. 8 http://www.johnstonnorth.com/contact
  9. 9 http://www.chris-wallace.com/
  10. 10 http://www.thingsthatarebrown.com/
  11. 11 http://sam.brown.tc/
  12. 12 http://www.mariusroosendaal.com/
  13. 13 http://validator.w3.org/
  14. 14 http://www.robbiemanson.com/
  15. 15 http://www.robbiemanson.com/
  16. 16 http://www.vanityclaire.com/
  17. 17 http://www.vanityclaire.com/
  18. 18 http://www.incg.nl/
  19. 19 http://www.incg.nl/
  20. 20 http://leetside.com/
  21. 21 http://leetside.com/
  22. 22 http://www.nineliondesign.com/
  23. 23 http://www.nineliondesign.com/
  24. 24 http://www.mikimottes.com/
  25. 25 http://www.mikimottes.com/
  26. 26 http://www.jakubkrcmar.cz/
  27. 27 http://www.jakubkrcmar.cz/
  28. 28 http://www.estudiomopa.com/site/?lang=en
  29. 29 http://www.estudiomopa.com/site/?lang=en
  30. 30 http://www.beta.chrisjlee.net/
  31. 31 http://www.beta.chrisjlee.net/
  32. 32 http://www.pedrolamin.com.br/2008/
  33. 33 http://www.pedrolamin.com.br/2008/
  34. 34 http://www.leightaylor.co.uk/
  35. 35 http://www.leightaylor.co.uk/
  36. 36 http://alexcoleman.net/
  37. 37 http://alexcoleman.net/
  38. 38 http://sarahlongnecker.com/
  39. 39 http://sarahlongnecker.com/
  40. 40 http://www.toby-powell.co.uk/
  41. 41 http://www.toby-powell.co.uk/
  42. 42 http://www.jayhafling.com/
  43. 43 http://www.jayhafling.com/
  44. 44 http://elliotjaystocks.com/blog/
  45. 45 http://elliotjaystocks.com/blog/
  46. 46 http://www.tonygeer.com/
  47. 47 http://www.tonygeer.com/
  48. 48 http://www.mariusroosendaal.com/
  49. 49 http://www.mariusroosendaal.com/
  50. 50 http://ryan-orourke.com/
  51. 51 http://ryan-orourke.com/
  52. 52 http://imgiseverything.co.uk/
  53. 53 http://imgiseverything.co.uk/
  54. 54 http://www.leightaylor.co.uk/
  55. 55 http://www.leightaylor.co.uk/
  56. 56 http://www.designme.sk/
  57. 57 http://www.designme.sk/
  58. 58 http://www.mattdempsey.com/
  59. 59 http://www.mattdempsey.com/
  60. 60 http://www.bcandullo.com/
  61. 61 http://www.bcandullo.com/
  62. 62 http://blog.andreaugusto.com.br/
  63. 63 http://blog.andreaugusto.com.br/
  64. 64 http://rawkes.com/
  65. 65 http://rawkes.com/
  66. 66 http://www.jepson.no/
  67. 67 http://www.jepson.no/
  68. 68 http://corkingdesign.co.uk/
  69. 69 http://corkingdesign.co.uk/
  70. 70 http://www.evaneckard.com/
  71. 71 http://www.evaneckard.com/
  72. 72 http://www.alexcohaniuc.com/
  73. 73 http://www.alexcohaniuc.com/
  74. 74 http://milesdowsett.com/
  75. 75 http://milesdowsett.com/
  76. 76 http://andrewbradshaw.com/
  77. 77 http://andrewbradshaw.com/
  78. 78 http://www.shannonmoeller.com/
  79. 79 http://www.shannonmoeller.com/
  80. 80 http://www.vlourenco.com/
  81. 81 http://www.vlourenco.com/
  82. 82 http://www.markdearman.com/
  83. 83 http://www.markdearman.com/
  84. 84 http://www.kitfolio.com/
  85. 85 http://www.kitfolio.com/
  86. 86 http://www.chris-wallace.com/
  87. 87 http://www.chris-wallace.com/
  88. 88 http://www.spoongraphics.co.uk/
  89. 89 http://www.spoongraphics.co.uk/
  90. 90 http://fabiano.me/
  91. 91 http://fabiano.me/
  92. 92 http://www.markwallis.ie/
  93. 93 http://www.markwallis.ie/
  94. 94 http://www.chris-morris.net/
  95. 95 http://www.chris-morris.net/
  96. 96 http://www.paiko.de/
  97. 97 http://www.paiko.de/
  98. 98 http://henryjones.us/
  99. 99 http://henryjones.us/
  100. 100 http://winnielim.com/
  101. 101 http://winnielim.com/
  102. 102 http://www.gregone.com/
  103. 103 http://www.gregone.com/
  104. 104 http://markhadley.com/
  105. 105 http://markhadley.com/
  106. 106 http://davidappleyard.net/
  107. 107 http://davidappleyard.net/
  108. 108 http://designmovesme.com/
  109. 109 http://designmovesme.com/
  110. 110 http://www.brianwebdesign.com/
  111. 111 http://www.brianwebdesign.com/
  112. 112 http://mikeprecious.com/
  113. 113 http://mikeprecious.com/
  114. 114 http://digitaldeceptions.ca/
  115. 115 http://digitaldeceptions.ca/
  116. 116 http://www.chiragjsolanki.com/
  117. 117 http://www.chiragjsolanki.com/
  118. 118 http://www.johnstonnorth.com/
  119. 119 http://www.johnstonnorth.com/
  120. 120 http://penflare.com/
  121. 121 http://penflare.com/
  122. 122 http://www.nineliondesign.com/
  123. 123 http://www.nineliondesign.com/
  124. 124 http://brianwilkins.net/
  125. 125 http://brianwilkins.net/
  126. 126 http://jasonsantamaria.com/
  127. 127 http://jasonsantamaria.com/
  128. 128 http://www.davidhellmann.com/
  129. 129 http://www.davidhellmann.com/
  130. 130 http://www.designedbydave.ca/
  131. 131 http://www.designedbydave.ca/
  132. 132 http://lukestevensdesign.com/
  133. 133 http://lukestevensdesign.com/
  134. 134 http://jameslaicreative.com/
  135. 135 http://jameslaicreative.com/
  136. 136 http://www.alessandro-cavallo.de/
  137. 137 http://www.alessandro-cavallo.de/
  138. 138 http://www.cssjockey.com/
  139. 139 http://www.cssjockey.com/
  140. 140 http://kerrynehil.com/
  141. 141 http://kerrynehil.com/
  142. 142 http://www.darrenhoyt.com/
  143. 143 http://www.darrenhoyt.com/
  144. 144 http://www.thingsthatarebrown.com/
  145. 145 http://www.thingsthatarebrown.com/
  146. 146 http://digitalmash.com/
  147. 147 http://digitalmash.com/
  148. 148 http://www.thethingswemake.co.uk/
  149. 149 http://www.thethingswemake.co.uk/
  150. 150 http://www.edmerritt.com/
  151. 151 http://www.edmerritt.com/
  152. 152 http://www.webdesignerdepot.com/2008/12/10-characteristics-of-excellent-portfolio-sites/
  153. 153 http://designm.ag/inspiration/portfolio-sites/
  154. 154 /2008/03/04/creating-a-successful-online-portfolio/
  155. 155 /2008/11/26/50-beautiful-and-creative-portfolio-designs/
SmashingConf Oxford

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Lee Munroe is a freelance web designer from Belfast. You can see his other writings on web design on his blog.

Advertisement
  1. 1

    Great article. Thank you! :-)

    -1
  2. 2

    Thanks for the tips and list of great websites.

    -1
  3. 3

    Thanks SM for the great tips! Speaking of which, I think SM needs a face-lift…current design has been on long enough.

    -1
  4. 4

    yes, they are perfect.
    Im totally amazed !

    -1
  5. 5

    Another great one for in the book!

    -1
  6. 6

    These 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!

    -1
  7. 7

    Could I asked, from where did you get these portfolios? Any website gallery?

    0
  8. 8

    Great article guys at SM. I’ll pass it along via twitter. @bobbyburdette

    -1
  9. 9

    Great article, I am going to incorporate these on my personal site. Thanks!

    -1
  10. 10

    Great article SM! already retweeted!

    -1
  11. 11

    been working on my portfolio site lately and this def comes in handy, thanks! and big props to all the designers listed.. awesome sites!

    -1
  12. 12

    Some links of the showcase are wrong. They are all linking to Robbie Manson´s website.
    Fix it, please ;)

    Cheers

    -1
  13. 13

    Very Nice Article Lee…. I like the details.

    DKumar M.

    -1
  14. 14

    joyoge designers' bookmark

    February 26, 2009 2:11 pm

    nice article good tips thanks..

    -1
  15. 15

    Wow…really great list. Very inspirational. Glad to see Elliot Jay Stocks made the list. His portfolio has always been one of my favorites.

    -1
  16. 16

    Great Portfolios!!

    Just might take some pointers here and there…

    Thanks SM!!

    -1
  17. 17

    Great post, am in the process of building my portfolio myself >.<

    -1
  18. 18

    been workin on my portfolio lately and this def comes in handy.. thanks SM! and props to all the designers listed! awesome work

    -1
  19. 19

    Thanks, have my portfolio up recently and it needs improvements!

    -1
  20. 20

    This 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.

    -2
  21. 21

    Great article Lee, nice one, some quality ideas and showcase sites.

    -1
  22. 22

    great list and advice

    -1
  23. 23

    Cant 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.

    -1
  24. 24

    I 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.

    -1
  25. 25

    Increí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. :(

    -1
  26. 26

    This 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.

    -1
  27. 27

    Thank 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.

    -1
  28. 28

    Timely and appropriate – thanks against for your efforts, SM! :D

    -1
  29. 29

    Great 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

    0
  30. 30

    Lee, thanks for the mad props! Always a pleasure to see my work out and about.

    3

↑ Back to top