Smashing Magazine we smash you with the information that will make your life easier. really.

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

By Mark Nutter, July 1st, 2009 in Design Showcase | 55 Comments | Forum

Dear friends, we try hard to meet your expectations with our posts. If you enjoyed this one, please don't forget to tweet it and follow Smashing Magazine. Thank you.

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

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

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

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

Mark has put his face on Mount Rushmore.

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

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

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

Subtraction.com, 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.

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

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.

Jason is Creative Director for A List Apart 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.

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

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

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

Jon Tangerine 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.

Douglas Bowman 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.

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

Front and Center

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

Toby’s about page 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.

Jason Reed 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.

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

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

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

Direct

A few of the about pages had very deliberate goals.

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

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

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

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

Minimalist

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

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

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 page is always easily accessible via a drop down effect. This also doubles as her contact form.

Business Card Websites (BCW)

Made By Elephant’s 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:

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

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

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

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

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

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 Nutter runs a web development shop in Minnesota. You can follow him on Twitter where he occasionally says something worthwhile.

Published in Design Showcase, July 1st, 2009
Tags: about, design, portfolio, showcases

1.

Matthias (July 1st, 2009, 1:30 am)

Great inputs, need to change this feature on my page too…
2.

songchanmoe (July 1st, 2009, 1:32 am)

wharr! nice post.
thanks a lot.
3.

patrick connor klopf (July 1st, 2009, 1:34 am)

ok. I’ll make a big foto of me.
usefull as most of the articles.
4.

div (July 1st, 2009, 1:43 am)

nice collection. i just liked all the designs.
5.

tods (July 1st, 2009, 1:46 am)

really inspiring…. :D
6.

Bjørn Friese (July 1st, 2009, 1:47 am)

Thank you for featuring Link [frieze.dk]!
7.

Henry (July 1st, 2009, 1:54 am)

Not bad, some of them are really good, others are what I thought normal about me pages looked like.
8.

Hirvesh (July 1st, 2009, 1:54 am)

Great tips! Got to apply these…
9.

PoLR (July 1st, 2009, 2:41 am)

Great list of resources. Our about us page is pretty straightforward (name, text, photo) so maybe it’s about time we tried something a bit funkier. I saw a really funny one the other day (http://www.designforums.co.uk/CD_Guidelines.pdf) where the designer had made himself into a branding guidelines document - genius!
10.

mike (July 1st, 2009, 2:55 am)

Thanks for this nice collection !
This one is nice too : Link [cozic.fr] : i love the “Link [cozic.fr]Link [cozic.fr] one !
11.

Toby (July 1st, 2009, 2:59 am)

Thanks for the feature. Some lovely sites in there
12.

Lucian E. (July 1st, 2009, 3:06 am)

The Smashing magazine logo needs a redesign…
13.

Dan (July 1st, 2009, 3:12 am)

Quomo is a terrible design. I clicked around a few times, had no idea what the site was about, and left. Sometimes “cute” is a bad idea.
14.

Osvaldas (July 1st, 2009, 3:28 am)

Thanks for listing me ;-)
15.

Mel (July 1st, 2009, 3:54 am)

Good article, but these are more “about me” pages than about us. Would like to see how this applies to small and large businesses that don’t appear to be run by a single individual.
16.

Matt Cheuvront (July 1st, 2009, 4:42 am)

Awesome write up - I’m actually looking for a designer to put together an about/online profile for me - so if any happen to be reading this, feel free to get in touch with me on Twitter (@mattChevy) - some pretty amazing stuff here.
17.

Mark Nutter (July 1st, 2009, 4:59 am)

@mel: I think that warrants a separate article. Including “about us” pages for businesses and web products would have tripled the size of this post. Great suggestion though, there are some truly superb “about us” pages for companies out there.
18.

John G. (July 1st, 2009, 5:20 am)

Man, I can see that I haven’t taken things far enough on my site. I’m going to use this post as a springboard for a more engaging About Me page. I had been resistant to putting a picture of me on the site, but it seems that people want to know who you are and what you look like. Curses…I HATE pictures of me! lol. Well, I’ll have to take a few good shots, I guess… :P
19.

Mike (July 1st, 2009, 5:22 am)

Every post on Smashing Magazine is helpful especially for newbie bloggers like me. What’s an about page? This article nailed it! It would be nice if there would be succeeding posts like how to write a disclaimer, or how to write an about me page.
This is truly an inspiration.
Thanks a lot!
20.

Phil (July 1st, 2009, 5:23 am)

@Mark I think Mel said that because the title of this post included the phrase “About us” and you followed up with mostly “about me” pages. It’s all very well, but when I started reading, I was expecting company or product pages and was a little let down.

I would be interested in seeing what I thought the original post was about, if you are going to write another article here.
21.

elcodigodebarras (July 1st, 2009, 5:34 am)

Some times we want to know whos´s behind one and other impressive webs or designs; or maybe just to feel there are humans like us, behind the terabytes of information we get day by day.
Vitaminicious compilation…thanks !
22.

@nduke (July 1st, 2009, 5:37 am)

useful info.

i would interested in seeing who in other sectors do abouts successfully.
23.

Pandjarov (July 1st, 2009, 5:43 am)

Despite Tobby Powell’s page all the other examples for “good” about us pages are simply pathetic.

Of course we see once more the pseudo-designers that obviously pay you to write about them and bore us to death.

Jason Reed is for like 5th time in an article and his website is the most boring thing in the world.

You should think less for advertising money and more about the quality of the sites you write about.
24.

Tim (July 1st, 2009, 5:49 am)

Some good designs… and quite a few truely horrible ones too as usual! oh, smashing magazine how unrefined is your taste in design.
25.

njlg (July 1st, 2009, 5:58 am)

Good information. As I was making a similar page for my site, I wondered how many people make their site work with mobile devices. A lot of those designs are really great for 960+ pixel screens, but what about less…
26.

Joseph Socorro (July 1st, 2009, 6:04 am)

Hi from Venezuela,

You can see my about page Link [josephsocorro.com]
27.

xea (July 1st, 2009, 6:23 am)

Thanks for this post! I found this one yesterday very good idea too: Dustin Curtis: Link [dustincurtis.com]
28.

Benjamin (July 1st, 2009, 6:23 am)

Some great designs in there, no doubt.
But, one question that keeps calling in my mind:
Are there good “About us” pages on other sites than a designer/webdesigner/webdeveloper/’s portfolio?
Where are the good examples from sites that were deveoped by these guys?
29.

Sean Geng (July 1st, 2009, 7:18 am)

Thanks for featuring me!
30.

DesignHippy (July 1st, 2009, 7:28 am)

Thanks for featuring my site! Wanted to get onto a Smashing Magazine post for ages and now I’ve done it! Keep up the good work and great post as always. Such a good resource for us designers!
31.

Vlad Georgescu (July 1st, 2009, 7:46 am)

Thank you for featuring me!
32.

AS (July 1st, 2009, 8:10 am)

THEY’RE ALL DUDES!!!! lame.
33.

Frank (July 1st, 2009, 8:26 am)

So these are very inspiring designs, but I believe the title is a little misleading… this is an “About Me” page, like a portfolio or freelancer site, as opposed to an “About Us” for a company. These are two completely different things and should have different philosophies.
34.

Guisella (July 1st, 2009, 8:57 am)

Awesome list!
35.

Greg (July 1st, 2009, 8:59 am)

About Us? Try About Me. That’s what these all are.
36.

John (July 1st, 2009, 9:10 am)

@AS: Seriously? You need to actually look at the article. There are 4 girls…if you weren’t being facetious.

I only like James A. Reeves and Toby Powell.
37.

Mike (July 1st, 2009, 9:19 am)

Awesome. I get great ideas from this. I also noticed how very few female web designers are out there in the world.
38.

Stu Collett (July 1st, 2009, 9:49 am)

Great examples, guys!

Stu Collett Link [www.superuserstudio.com]
39.

ZariaZ (July 1st, 2009, 11:26 am)

I’ve just finished mine and now I see new ideas.. eh
[zaria-z.com]
40.

Dizzledorf (July 1st, 2009, 12:47 pm)

Some great designs here, for sure.
But how in the world is this “best practices”?!
41.

ropiafoldetnezi (July 1st, 2009, 1:18 pm)

great!
and how about this? Link [360foto.hu]
42.

Stuart (July 1st, 2009, 1:46 pm)

Thanks for this list. Hopefully, I will remember this, when I get around to redesigning my website.

129451subscribers

Sponsors
Advertise with us!

Senior Back-End Developer & Web 2.0 Expertat BestBuys.com (Remote, Anywhere)
Front end design/developerat Confidential, Bay Area startup (San Francisco, CA)
Experienced Blog Writerat Webdesigner Depot (Anywhere)

Browse all jobs » Post your jobs now!

Smashing Links

Stay in touch

All Posts

Fresh Bookmarks

Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,

Webdesign: Five Minute Upgrade
Making Your Design Pop.

45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.

The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.

10 Impressive JavaScript Animation Frameworks
Create stunning and eye-grabbing animation and transition effects.

Linux System Monitoring Tools Every SysAdmin Should Know
Need to monitor Linux server performance?

Top 25 Funniest Comic Strips About Blogging
Parodies of “A-List” bloggers

How to Make a Slideshow with a Transparent PNG Frame
A useful XHTML/CSS/jQuery-tutorial.

25 Examples of Using Textures
Inspiration for how you might use textures in web design.

75 Sets of Unusual Photoshop Brushes
Unique and unusual brush packs that you may not be aware of. These may prove to be very useful for a particular project.