How To Make Your Landing Page Stand Out


Earlier this week we asked you how you make your personal landing page stand out amongst the crowd and you wrote in with great ideas and examples. Here are some of the best and the processes behind them.

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 too hard to 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.

Check out Paulo’s site in action.

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.

Step 1: Get an awesome photo

Step 2: Sketch out a layout in MY small moleskin notebook

Step 3: Photoshop

Step 4: Tumblr + Code up some CSS 1.2 and HTML9

Step 5: Validate that [ISH…or] don’t, I don’t care and nether does my Aunt who likes my websites.

Step 6: $$$$$$$$$$$$$$$$

Check out the full view of Matt’s page or just visit his site.

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, colour 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 of Sahas’ page are really best experienced by using it, so go and 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 courses 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.


The Cheapest NBN 50 Plans

Here are the cheapest plans available for Australia’s most popular NBN speed tier.

At Lifehacker, we independently select and write about stuff we love and think you'll like too. We have affiliate and advertising partnerships, which means we may collect a share of sales or other compensation from the links on this page. BTW – prices are accurate and items in stock at the time of posting.

Comments


Leave a Reply