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'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!
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 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'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: $$$$$$$$$$$$$$$$
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.
The benefits of Sahas' page are really best experienced by using it, so go and check it out.
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.
- 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.