creating a landing page

we've recently been working on a very unique site design for heart to heart adoptions. part of what makes this site so unique is their landing page - which required some design requirements i'd never encountered before. how did we handle this type of landing page? read on to find out!


because the industry isn't always clear, let me clarify "landing page" or "squeeze page" as an entry page to a website, that doesn't include a normal, full navigation and content. typically, these are meant to "squeeze" people into a website.

in this more unusual case, we needed a landing page that would split site visitors into two groups.

our first concept was simple, beautiful, and very unique. our final design, above, also meets the criteria beautifully, uniquely, and clearly; an "antique photo album" with polaroids. i love these designs; i think this project has been a favorite.


it's important to consider a few things when creating a page like this.

• limit content! the more you have, the less your visitor will read. just include enough for them to want to click on something.
  
• limit the number of links as much as possible - you'll notice that there are only two options here; in the final concept we chose (at the top) they are repeated to make it even easier for the user to get somewhere.
• design for the viewport - keep important content "above the fold" - usually 768px. this is essential on a landing page.
  
• make it interesting - both of these designs use different elements to balance the page and make it feel dynamic. especially with two choices, you don't want a boring right vs. left layout! believe me, i tried it, it was ugly.
• do something different - as long as it isn't confusing, it'll pique a visitor's interest. in this industry, most adoptive families & birth families will visit dozens of sites to do their research. this site will stand out as a memorable representation of a great company.

photoshop techniques i used in the final design:

• add a border to the photos for a "polaroid" feel
• don't use the standard drop shadow effect. here, the polaroids feel 3D because i bent the edges of the shadow. to make the shadow, use the pen tool to outline the photo edges, but curve the sides inward just slightly. set the transparency to 40% or so, and add a gaussian blur at 1.5px or so (convert the shape to a smart object first so you can make changes to it later if you need). move the shadow diagonally a few pixels, and voila! the photo seems to naturally sit on the page with corners that bend up slightly. much more natural. layer a few photos and angle them so it looks like a stack.
  
• add a texture and drop shadow to a shape to make it look like real paper. if you have an image of the paper, play with the coloring and transparency so it really fits your design - never drop an image in without playing with it first!
  
• distress the main titles using a layer mask and a distressing photoshop brush (you can find them for free in the forums at adobe.com)