How to Make Your Personal or Professional Landing Page Stand Out

I am a big advocate of personal (or professional) landing pages. Kind of a virtual business card or resume even. Cool and easy and always up-to-date. Here are some great tips from Lifehacker readers on creating your own and making it stand out from the rest:

To get started, just click through the gallery above. Each image shows one landing page and a little bit about how it came to be. After the showcase, we summed up what we felt worked best about all these pages and how you can use the same principles to make a great one for yourself.

Marc Rabinowitz

Marc’s approach to his landing page is a pretty straightforward design, letting you scroll down the page to find out more. It also features a handy menu to jump around more quickly if desired. Marc explains his process:

As my professional landing page, I didn’t want to make people work to hard too figure out what I do (and have done) and why it matters to them. I’ve start by introducing myself with a simple infographic, to get a quick smile out of anyone who might view the page. Overall, kept it simple and to the point-just enough to entice people to contact me if they want to know more!

The image above only shows a small portion of Marc’s page. You can view the full image here or visit his site.

BJW

Rather than the large, single image-centric designs you often see on landing pages, Brandon opted for something a little more interactive and animated:

I wanted a basic page that showed all the necessary information, was aesthetically pleasing and just a little bit different. I looked around the web for inspiration on design then played around with the code to get it to work in a funky but not overly gratuitous way. Have a look and hopefully you will see what i mean.

When you check out his site you’ll see how its interactivity and simple animation make a huge difference.

Paulo Capdeville

Paulo created a simple page that expands as you interact with it, but one of the best parts is watching the background illustration change its style while you wait. Paulo offers a little insight into his approach:

I wanted a K.I.S.S. (keep it simple, stupid) approach, full screen slider up to three images showing off three different styles: vector, photo manipulation and traditional pencils (with a little Photoshop). Plus a few lines introducing myself.

Matt Reed

Matt’s page has a lot of personality, complete with some fun little secrets. For example, when you scroll all the way down the page it reveals a hidden photo. Matt explains his process:

Well first of all, HTML5 is so yesterday it’s not funny so enough already! I said to myself, hey, let’s take it up a notch ok? So I DID and now I’m pretty much 10 years ahead of the curve so I’m gonna just keep making my beer and drinking with all my free time.

Rob Sawyer

Rob’s page takes a similar approach to Marc’s, in that it’s a long design where you scroll down to learn more. It also uses omnipresent navigation to help you jump around, but displays it in a top row rather than in a menu. Rob explains a little bit about what he feels is important in a personal landing page:

As for a good personal landing page—most important are: Typography, color scheme, and white space. Responsive design is great as well, if you know the CSS to do so.

There’s a lot more to Rob’s page than you can see above. Check it out.

Sahas Katta

Sahas’ portfolio mimics a Windows Phone 7 device, keeping everything compact and fun to navigate. He put it together using HTML5, CSS3, JavaScript, a little Photoshop, and some assets from the Windows Phone 7 SDK. Overall it makes for a fun way to navigate his landing page and also include quite a bit of information in a small space.

The benefits are Sahas’ page are really best experienced by using it, so go check it out.

The Takeaway

What can you take away from these examples? Here are the three most important similarities that make these pages great:

The creators chose an aesthetic that feels personal to them.

The pages were coded from scratch to provide more control over the look and feel than a regular landing page creator can provide. (By the way, if you want to learn these skills we have Lifehacker Night School course for both making a web site and JavaScript.)

Rather than simply making an attractive landing page, each creator thought about how the user would interact with the page. Some kept it simple and others offered a lot of interaction, but everyone thought about how their page would be viewed and used before putting it together.

When you’re putting your page together, you’ll want to keep these things in mind. While design sense, talent, and lots of practice are necessary as well, the above principles will help your make a landing page that stands out.