Best Practices For Effective Design Of “About me”-Pages

Advertisement

The “about me”-page is one of the most overlooked pages in development and one of the highest ranked pages on many websites. In a world that’s becoming increasingly connected through the Web, it’s important that you engage your audience in a personal and friendly way, otherwise you risk just being another faceless web designer among a sea of websites.

We had to go through hundreds of sites to come up with the following list. It seems most designers and developers run out of steam by the time they got around to developing their about pages. Most designers we came across simply threw up a few hastily written words about themselves instead of treating the page as an important asset. Others, however, have truly taken the time to treat their about page as if it were important as the home page. In fact, some went as far as using their about pages as their home page.

We present 60 beautiful and effective about pages that engage users and neatly present their designers. We also examine the growing trend of Business Card Websites (BCW’s).

Unique “About”-Pages

A great way to distinguish yourself from the crowd is to have a truly unique about page.

Dustin Curtis1 has taken a truly unique approach to the about page. What he has created is a death clock of sorts; a timeline of his life up until now and to beyond. It’s an about page that truly speaks to the designer’s capabilities and creativity. It accomplishes the most important thing about a website and a great about page – it’s something you won’t soon forget.

Screenshot2

While the content is slight, the “Floating Asian Kid” gag3 below is cute. Move your mouse around the graphic to see why. It is both memorable and unique

Screenshot4

Quomo5 has taken a very unique approach to the about page – a series of full-body action shots on a horizontal carousel.

Screenshot6

Jared7 has taken a very clever approach to the self portrait (quite literally).

Screenshot8

Mark9 has put his face on Mount Rushmore.

Screenshot10

Guðmundur11 has used big typography and an interesting perspective for his portrait.

Screenshot12

Big Photograph

A large photograph of yourself can leave a lasting impression in your users minds if it’s done well.

The more we use computers to communicate, the less face-to-face interaction we get. This is why David DeSandro’s about page13 is so effective. His headshot is as big as any I’ve seen on an about page makes you really feel as thought you’re meeting a real person rather than some web designer on some website. Once the introduction is made, you can easily connect up with David via his social networking presence or the handy contact form below his picture. It’s worth noting his about page is well organized as well.

Screenshot14

Janis’ about page15 is short on copy but big on artistic design. You get a good impression in short order.

Screenshot16

Subtraction.com17, in addition to being one of the coolest domain names ever, is a picture perfect study in minimalism. Khoi chose an incredible picture for his about page and organized his biography into an easily digested format. It doesn’t hurt that he threw his adorable black lab in there for good measure.

Screenshot18

Screenshot19

Aside from having an incredibly awesome domain name (unstoppablerobotninja.com), Ethan20 has a great about page too.

Screenshot21

Well Organized

The best about pages we found were the ones that had a lot of information but were excellently organized, making them easily digestible. When faced with the task of creating an about page, it’s easy to get overwhelmed and put it off indefinitely because the subject you are dealing with is yourself. It is a subject we know more about than anything else and it can be difficult to know just how much and how little we should tell the world about ourselves. A good about page must be informative without being too wordy.

Jason22 is Creative Director for A List Apart23 and it’s clear why. He has pioneered the idea of the “fast design direction” approach to updating websites, a method where instead of doing a major re-design of a site after a long period of time, each article or update gets its own unique design. David and Dustin from above use the same sort of system. Jason’s about page is clean, organized, and personable. We can see at a glance what he has written elsewhere, what he’s about, and what he’s capable of.

Screenshot24

Joseph25 makes sure to give thanks and credit where it’s due on his about page.

Screenshot26

The 2-column layout used by Travis27 neatly encapsulates everything about who he is and what he does. You can easily scan for the information you need.

Screenshot28

SimpleBits has always been an inspiration to many web designers and it’s no surprise Dan Cederholm’s about page29 is one of the best organized and informative out there.

Screenshot30

Jon Tangerine31 is a master of typography. The first time I visited his site I was amazed at what he was able to accomplish without the help of sIFR or other font rendering engines. His about page is a joy to view. Every section is deliberate, informative, and attractive.

Screenshot32

Douglas Bowman33 is a creative director for Twitter and has been working on the web for as long as its been around. His about page is succinct and entertaining. We as graphic designers get exactly what we want in the section devoted to previous design iterations of his website over the years. Check out his footer when you’re on the about page, too, for a bit of cleverness.

Screenshot34

Screenshot35

Screenshot36

Screenshot37

Screenshot38

Bubs39 has quite a lot of information but it’s neatly categorized and amusing.

Screenshot40

Screenshot41

Screenshot42

Screenshot7443

Screenshot44

Screenshot45

Front and Center

Some designers have gone as far as making their about pages their home pages.

Toby’s about page46 is actually his home page, which for a personal website (and formal name as his domain name) is a great idea. After all, if we’re visitng Toby’s site for the first time it’d be nice to know who the designer is. He also flips the large portrait concept on its head by giving us a large silhouette where it’s supposed to be.

Screenshot47

Jason Reed48 uses an excellent hand drawn illustration portrait as his about page centerpiece, and his about page in turn is his website’s centerpiece and the first thing you see when you land on jasonreedwebdesign.com. His professional details are neatly organized into a horizontal accordian and there’s no fluff – just the most important information one might want to know when considering Jason for a freelance project.

Screenshot49

This website50 is hard to ignore not only because of its striking yellow background, but Bjørn’s organization of information.

Screenshot51

Vlad52 has a very distinct goal in mind with his site and he accomplishes it with great typography and layout.

Screenshot53

Kyle54 pokes fun at the traditional folio site with his one-page offering. You can easily find out all about him and his internet presence.

Screenshot55

Direct

A few of the about pages had very deliberate goals.

Jonny56 gets straight to the point with a mission statement and a brief summary of who he is.

Screenshot57

Nick58 has created an extremely professional about page, complete with testemonials, great portrait, and a press kit to boot.

Screenshot59

Suzy60 sums up herself up well in one sentence, goes into depth for those who are interested, and gives straightforward information about her capabilities and availability.

Screenshot61

Dan62 has a clever portrait and a great succinct description of his talents and abilities complete with his resume and a link to contact him.

Screenshot63

Screenshot64

Screenshot65

Screenshot66

Minimalist

A minimalist approach can be a great way to convey important information about yourself without distracting the user.

Screenshot67

Screenshot68

Screenshot69

Screenshot70

Screenshot71

Garret72 actually acknowledges the fact that his about page is more popular than he first thought it would be, citing this as the reason for giving it more attention.

Screenshot73

Screenshot7443

Screenshot75

Screenshot76

Drop-Down

A few of the about pages we found were actually accessible not from a traditional page but an ajax driven drop-down modal. It’s a great way to make the information about yourself easily accessible to anyone from any page without forcing users to navigate away from the page their currently reading.

Brynn’s about page77 is always easily accessible via a drop down effect. This also doubles as her contact form.

Screenshot78

Screenshot79

Business Card Websites (BCW)

Made By Elephant’s80 Tim Van Damme recently started a trend he coined Business Card Websites (BCW), or specialized contact/about pages for individuals that are heavy on ajax and great design. Once Tim got his BCW online other designers started following suit. BCW’s are a great place to send people if they want to get an overview of your social networking presence, portfolio and capabilities, contact information, etc. We have a feeling we’re going to start seeing more of these pop up in the near future. Here are a few of the best we’ve found so far:

Tim81 has three tabs on this BCW which tell you how to find him on the net, who he is, and how to get in touch with him.

Screenshot82

Rogie King83 runs Komodo Media, and his BCW retains some of the design elements he uses there. Great consistency.

Screenshot84

Michael’s BCW85 has a stunning underwater effect with appealing organic treatments.

Screenshot86

Matthias87 blogs over at kremalicious.com and has also chosen to keep his design consistent across his BCW.

Screenshot88

Daniel89 has taken a minimalistic approach that works quite well. It’s clean, simple, to-the-point, and friendly.

Screenshot90

Screenshot91

Screenshot92

Screenshot93

Screenshot94

Screenshot95

There you have it: 60 beautiful and effective about pages from personal websites, blogs, and portfolios. Hopefully this will inspire you to revisit their about pages and come up with some unique and innovative ways of representing yourself on the web.

Mark Nutter96 runs a web development shop97 in Minnesota. You can follow him on Twitter98 where he occasionally says something worthwhile.

Footnotes

  1. 1 http://dustincurtis.com/about.html
  2. 2 http://dustincurtis.com/about.html
  3. 3 http://designspasm.net/#me_link
  4. 4 http://designspasm.net/#me_link
  5. 5 http://www.quomo.org/
  6. 6 http://www.quomo.org/
  7. 7 http://www.jaredigital.com/about/
  8. 8 http://www.jaredigital.com/about/
  9. 9 http://www.markmcgall.com/me.html
  10. 10 http://www.markmcgall.com/me.html
  11. 11 http://www.gummisig.com/about
  12. 12 http://www.gummisig.com/about
  13. 13 http://desandro.com/about
  14. 14 http://desandro.com/about
  15. 15 http://www.dreamerlines.lv/
  16. 16 http://www.dreamerlines.lv/
  17. 17 http://www.subtraction.com/about/
  18. 18 http://www.subtraction.com/about/
  19. 19 http://yomenzdesign.com/about.html
  20. 20 http://unstoppablerobotninja.com/about/
  21. 21 http://unstoppablerobotninja.com/about/
  22. 22 http://jasonsantamaria.com/about/
  23. 23 http://alistapart.com
  24. 24 http://jasonsantamaria.com/about/
  25. 25 http://designhippy.com/aboutMe.shtml
  26. 26 http://designhippy.com/aboutMe.shtml
  27. 27 http://www.tschmeisser.com/about
  28. 28 http://www.tschmeisser.com/about
  29. 29 http://simplebits.com/about/
  30. 30 http://simplebits.com/about/
  31. 31 http://jontangerine.com/about/
  32. 32 http://jontangerine.com/about/
  33. 33 http://stopdesign.com/about
  34. 34 http://stopdesign.com/about
  35. 35 http://www.komodomedia.com/about/
  36. 36 http://paiko.de/about.php
  37. 37 http://www.osvaldas.info/
  38. 38 http://sarahlongnecker.com/about/
  39. 39 http://bubblessoc.net/about/
  40. 40 http://bubblessoc.net/about/
  41. 41 http://www.jimmyoh.com/om-jimmy-oh.html
  42. 42 http://www.branded07.com/about-me/
  43. 43 http://www.red-root.com/about/
  44. 44 http://www.jamesdeangelis.com/about.html
  45. 45 http://daveharrison.net/about-me
  46. 46 http://www.toby-powell.co.uk/
  47. 47 http://www.toby-powell.co.uk/
  48. 48 http://www.jasonreedwebdesign.com/
  49. 49 http://www.jasonreedwebdesign.com/
  50. 50 http://frieze.dk/
  51. 51 http://frieze.dk/
  52. 52 http://vladgeorgescu.com/
  53. 53 http://vladgeorgescu.com/
  54. 54 http://www.kylestanding.com/
  55. 55 http://www.kylestanding.com/
  56. 56 http://www.gonzo-design.com/about/
  57. 57 http://www.gonzo-design.com/about/
  58. 58 http://www.nickfinck.com/about/
  59. 59 http://www.nickfinck.com/about/
  60. 60 http://suzyjohnston.co.uk/about.php
  61. 61 http://suzyjohnston.co.uk/about.php
  62. 62 http://www.iamdan.net/about.html
  63. 63 http://www.iamdan.net/about.html
  64. 64 http://travisisaacs.com/about/
  65. 65 http://ftdesigner.net/
  66. 66 http://www.matthamm.com/
  67. 67 http://www.nicholaspatten.com/about/
  68. 68 http://www.getfinch.com/about/
  69. 69 http://kinosport.tv/information/
  70. 70 http://madebyon.com/about/
  71. 71 http://themaninthesea.com/index.php/site/life/
  72. 72 http://garrettdimon.com/pages/about
  73. 73 http://garrettdimon.com/pages/about
  74. 74 http://www.red-root.com/about/
  75. 75 http://www.minning.de/#about
  76. 76 http://danjoedesign.com/about.html
  77. 77 http://www.brynnshepherd.com/
  78. 78 http://www.brynnshepherd.com/
  79. 79 http://selfconclusion.co.uk/
  80. 80 http://madebyelephant.com/
  81. 81 http://timvandamme.com/
  82. 82 http://timvandamme.com/
  83. 83 http://rogieking.com/
  84. 84 http://rogieking.com/
  85. 85 http://www.michaelvillar.com/
  86. 86 http://www.michaelvillar.com/
  87. 87 http://matthiaskretschmann.com/
  88. 88 http://matthiaskretschmann.com/
  89. 89 http://www.danielgenser.com/
  90. 90 http://www.danielgenser.com/
  91. 91 http://danielrubin.org/
  92. 92 http://www.johnphillips.me/
  93. 93 http://cdharrison.info/
  94. 94 http://www.tylergalpin.com/
  95. 95 http://www.maykelloomans.com/
  96. 96 http://nuttersmark.com
  97. 97 http://area-studios.com
  98. 98 http://twitter.com/marknutter

↑ Back to top Tweet itShare on Facebook

Mark Nutter runs a web development shop in Minnesota. You can follow him on Twitter where he occasionally says something worthwhile.

Advertising
  1. 1

    When I first read the article, I thought it had to do with WHAT part of “About me”, I just realised that it’s the HOW part that makes a difference.

    Thanks you for your enlightenment. I am ready to post my About me!

    1
  2. 52

    Those are good about me page. It makes me embarrassed to show mine. I’ll go back and change it okay? Don’t peek until I am done. Meantime, thanks for the ideas. They really help put things in perspective. I hope I can do as well as those guys.

    1
  3. 103

    Hmmm … it’s interesting that lots of these pages feature men and not women. Just an observation. Nice article, as always.

    1
  4. 154

    Hi, Few day ago first visited your site but now I always visit your site when I in net its nice….I am a graphic designer.

    1
  5. 205

    Wow these are very funny, clever, and inspiring.

    1
  6. 256

    Very inspiring… :) Thanks.

    1
  7. 307

    I really like the big photograph about pages. They look so effective! I have to say that I enjoy Khoi’s Subtraction a lot. his minimalistic and creative design is just amazing!

    1
  8. 358

    Very true — the “about” page, being overlooked and sometimes neglected. But Mark has done a good job; this is definitely a nice list of examples of those that have created a unique face for themselves [and/or their company] online.

    See, we all know that there is a good deal of competition out there — within our respected field — nevertheless, if one takes time on the “about” section of their site, it just might set them apart.

    Here’s mine: Link

    1
  9. 409

    Please shorten the number of examples in these articles. I love the info, but I’m really put off by the overwhelming number of examples displayed.

    If you’re not careful, SM is going to turn into a “bookmark but don’t read” website. Not good.

    2
  10. 460

    a great list of websites, and some great websites for some inspiration

    1
  11. 511

    wow, it’s cool

    1
  12. 562

    Fwiw, ” Kyle Standing” (“Folio websites are so last year”) is the work of Daniele Codega. There is no Kyle as far as I can tell. This image / link is incorrectly credited :)

    1
  13. 613

    I noitced how the new trend has been all about the Hi, I’m Eddie……………………… 2 lines of big text. I like more original ideas and I think that the deisgner should always put his/her picture OR one of their best work on the homepage.

    1
  14. 664

    this guy’s about page wins at facial hair…and is also pretty clever. jonathan youngblood

    2
  15. 715

    Alexander Bickov

    July 10, 2009 4:34 am

    Looks nice! I like shiny designs and ideas. Very soon i’ll post my personal portfolio and about information. Check updates :)

    1
  16. 766

    I actually stumbled upon (SU) your post, and it was exactly what I was looking for. Excellent!!

    – jens -

    0
  17. 817

    Great job, but with one comment. The point of these web sites is to get people to read them. But reverse type (white letters/black background) is notoriously hard to read. For people that claim to be communicators, going with reverse type is pretty amateurish. Best sites followed all the rules of how the brain processes info: dominant graphic, readable type, subheads, good flow.
    Nick

    1
  18. 868

    That’s a pretty neat list, wonder why mine didn’t show up here ;) , just kidding, but honestly its cool too. Check out fortunewatch if you like. Most of the above are very creative, think I should work on something like these.

    Cheers

    1
  19. 919

    Great idea for a post. My About Me page is about to receive a makeover!

    1
  20. 970

    Christopher Jack

    August 26, 2009 7:26 am

    wow! Cool collection :D

    1
  21. 1021

    Thanks for these tips !

    1
  22. 1072

    hey great post. I am designing my site now for my wife and I and really didn’t know what to do about the about page. This helped a great deal. Cheers!

    1
  23. 1123

    Simply the best post for About-me page.

    1
  24. 1174

    beautiful inspirations about “about us” page designs.

    1
  25. 1225

    Thanks for featuring some stunning ‘About Me’ pages here – they are very inspiring!

    On another note, as I am now designing a layout for a site with several staff (myself included), does anyone have any great links/sites that showcase a way of displaying info about the site and its staff just on one page?

    Thanks.

    1
  26. 1276

    thanks it helped a lot…………….got some great ideas :)

    1
  27. 1327

    Social Media MC

    March 9, 2010 7:55 pm

    Lots of great ideas, we are working on updating our page and this really helped. You found a wide variety here, thanks for sharing!

    1
  28. 1378

    Memento Photo Booth

    March 9, 2010 7:56 pm

    Lots of cool About pages in here, we were researching and this was the most helpful article. Thanks

    1
  29. 1429

    Okay, okay, I’ll add an about page.

    1
  30. 1480

    Thanks for the article, this is just the motivation I needed to add an about page to my site!

    1
  31. 1531

    All about tech skills, no good design (there is more to it than just knowing a few programs). Some of the examples are HORRIBLE!

    2
  32. 1582

    Kamil Kaniuk (Merix Studio)

    May 21, 2010 5:52 am

    Great article,

    We got inspired and decided to revamp our “about us” page too :), results: merixstudio.com/company

    1
  33. 1633

    This article offers some great tips. My site is in the middle of a redesign and I want to re-write my ‘About Me’ page, so I will definitely be using some of these ideas.
    Thanks!
    Julianne

    1
  34. 1684

    Looks like I need to create an about me page for myself now :)

    1
  35. 1735

    Thanks for your article. I read it at the good moment, while I was thinking of my about me page :-) ANd here is the result http://www.evedufaud.com/?page_id=122

    1
  36. 1786

    Thank you for this great collection. Very inspiring.

    1
  37. 1837

    Saskatoon Web Design

    January 2, 2011 5:31 pm

    Good post although I thought a few of these were pretty plain … I was looking for more of a “best of the best” kind of article … gotta love smashing mag though… cheers.

    1
  38. 1888

    Thanks for this great collection of “About Me” pages! On a 5 star scale, I give it 5 solid stars. I love how you chose a variety of examples that creatively express *who* each person really is. You saved me much research time, and now I can start designing! I hope to fill my blank page soon: http://www.moxiemedia360.com

    1
  39. 1939

    Brilliant. A very illustrative post!

    1
  40. 1990

    very nice post and feature of these other about me pages, some very unique and expressive!

    0
  41. 2041

    Ashley S.C. Walls

    April 3, 2011 7:07 pm

    THANK YOU. Very helpful

    1
  42. 2092

    Freat article, Thank you.

    1
  43. 2143

    Patrick Taylor-Edwards

    April 14, 2011 2:59 am

    These are all fantastic About Me pages. Gave me the inspiration to re-do mine! Lots of nice JQuery plug-ins. Would love to get some feedback patricktayloredwards.com/About.php

    2
  44. 2194

    I realize this post is a bit aged, but I can’t resist leaving a big *thank you for compiling such fantastic examples! I have been looking for “About Me” inspiration and it was putting me to sleep until I found your post. These examples are anything but cookie cutter!

    1
  45. 2245

    Nice collections !

    1
  46. 2296

    Great examples. I’m thinking about assigning this article for a course module on eportfolio design, but I’ll have to give a disclaimer about how male-centric the collection is. :/

    0
  47. 2347

    Great reference across many themes, thanks Mark

    0
  48. 2398

    I don’t appreciate the fact that your page title is a broken promise. I came here looking for best practices (as the title stated), not examples. A best practice is a guideline for how to do something. Don’t title the page “best practices” if you don’t provide them.

    0
  49. 2449

    beautiful collections

    -1

↑ Back to top