Modern Design Trends for Landing Pages

By / Jul 26, 2012 / Tips
shares

Product landing pages can have a very different feeling based on what you’re selling. Internet marketers are always studying the best design tips for gaining traction and increasing sales numbers. But unfortunately there is no one-size-fits-all solution to the problem. Instead you have to consider which modern design trends are working for other people in your shoes.

featured image - deals and sponsored landing pages

In this article I want to share a few ideas for creating picture-perfect landing pages. Whether you’re selling e-books or website templates you’ll want to know how to grab your visitor’s attention. All of these trends can be noticed in many other websites all around the web.

Showcase your Best Talent

The most important piece to any landing page is the content you’re selling. Whether this is a digital product visitors can purchase, or even if your landing page just needs to gather e-mail addresses. Content is what drives the Internet and different interests between people.

WPBundle selling premium WordPress themes

I like the example from WP Bundle not just for the design, but also for the unique color scheme and branding techniques. Right away you are presented with a thumbnail gallery of WordPress themes which you can click through to read more information. Large graphics and background textures catch your eye within the first few seconds after the page loads.

WP Bundle also has graphics further down the page which display their themes in a very positive light. You need to coerce visitors to purchase your products, and this requires their trust and attention. Design your product graphics to include tricks such as split views and magnifying glass zoom effects.

Simple and Professional

There’s no reason you can’t build a landing page which is both professional and minimalist. You want to present all the bare-bones essential information right off the bat. Then visitors can choose to go through deeper pages on your website if they’re interested.

Many of the HTML5/CSS3 additions make developing professional templates a breeze. You can use CSS3 gradients and transition effects which look stunning in modern browsers. Cubender has a very simple 3-field input form where visitors can sign up for their web services.

Cubender landing page design signup form

If you can include a similar sliding panel to showcase your products this will be even better. You can have each slide linking into a different page on your website. These inner pages may contain product links or more detailed screenshots. Landing pages need a sense of variety or else you end up looking like a generic affiliate sales page.

Fill Up Gaping Spaces

You should be able to determine when your layout is cluttered vs. openly bland, plain, and boring. When you design a landing page you’ll want to utilize any and all space necessary to pitch your product. A great example is on Flow’s landing page where each section has been split vertically.

FlowApp tasks list online cloud app

Many of the graphics and screenshots fill up the browser window by default. Large monitors and laptops can adapt, which makes the viewing process all the more enjoyable. As you scroll down you’ll notice much of the text has been sized to also fill up a majority of the window. I like this technique because it’s super easy reading content when you’re sitting a fair distance away from the monitor.

Plus when you increase font sizes your headings and paragraphs with naturally fill in more room. When you don’t have a lot to write about, larger typography makes your landing page feel more important. Each feature of your product is carefully processed – especially if you can list out the important design qualities.

Sexy Eye Candy

Possibly the greatest way to keep visitors glued onto your landing page is through stunning graphics design. Using custom icons and illustrations will help with branding your product, and this makes your website memorable weeks down the road. People will return to your website and instantly remember seeing the layout before.

mobile iOS iPhone/iPad app studio Sophiestication

Sophiestication is an app development studio who builds mobile apps for iOS. Their landing page offers different graphics based on each of their apps, which you can cycle through by clicking on the individual app icons. It’s a really beautiful layout and the additional sub-pages for each application adds a whole extra level to the website.

Highlight your Key Traits

Every digital product has some good points and some bad points. Ultimately it’s your job as the designer to create a landing page which highlights all the super important, best features available. You can do this with screenshots and captions, along with sponsored testimonials.

Boston Massachusetts web hosting via FatCow

To build up some extra hype you could additionally offer sales and sponsored deals for select clients. When visitors purchase a larger plan you can offer free coupons or discounts on the original price. Or alternatively setup a time-sensitive sale which only lasts a few days.

When people inevitably find your product there will surely be complaints and support requests. This is the stage where you can figure out just how much value you are offering with these sales. Always remember that you’re building products for customers, and so these users find your website and hold judgements until proven otherwise. Make sure these judgements are positive and showcase your skills in a beneficial light.

Final Thoughts

Hopefully these tips can get you thinking about design trends from a marketer’s perspective. Internet users aren’t stupid and they know when you’re trying to sell them something. It’s best when you work with your potential customers and offer a very simple yet secure checkout process.

It will take a lot of practice before you can master the art of landing page design. But along the way you will learn invaluable lessons about Internet marketing which cannot be taught in a day or even a week. Push through the early stages and keep practicing! If you have similar ideas or questions about landing page designs feel free to share in the post discussion area below.

About the Author

Jake Rocheleau is a creative writer and UI designer. You can follow him on twitter @jakerocheleau or visit his personal website at JakeRocheleau.com.

13 Comments

  1. Rocky
    July 26, 2012

    Well, design is very import in an online business for a certain website, but what if you have a bad content on it? So, this wont still count for your possible customers or clients to purchase your products or services..

    Reply
  2. kathy
    July 26, 2012

    just how important is “Sexy eye candy”? i see a small ton of boring, letter style designs with minimal graphics and lots of different font colors…. somebody must be testing and finding that to work. these are artistically pleasing, but do they convert?

    Reply
  3. aledesign.it – Creative Graphic
    July 26, 2012

    For me the best landing page are those have a good rapport between design and contents. Not much graphic but in any case have a correct disposition of the form and advertise. Is not always easy to make a good landing page. Under we make a good study!

    Reply
  4. Suzie
    July 26, 2012

    If the content isn’t well written/defined then it makes the landing page worthless. To drive traffic from a landing page to your main site, a balance is required between content and design to make the page engaging and intuitive to its users. The user should want to find out more.

    Reply
  5. Bodhum
    July 26, 2012

    First impressions are key to your new and returning visitors. Your company website is how you sell any product, even your branding motivation. These tips are fantastic for Internet marketers coming to grips with the power of social media.

    Reply
  6. Alex
    July 26, 2012

    Cubender is unfortunately a ripoff of Shopify.

    Shopify has since replaced those hero images with a video, but I can assure you it’s the same thing.

    Reply
  7. desgr.com
    July 26, 2012

    Ha. Cubender completely ripped off Shopify’s landing page. Everything from the colour scheme to the textured background the checkmarks beside each heading to, well, everything else.

    Reply
  8. Ryan Quintal
    July 26, 2012

    No mention of any the design works authors?

    Reply
  9. Christina Cruz
    July 26, 2012

    Content is extremely important and people won’t view the other pages if it doesn’t say something that interests them. That being said, Jake Rocheleau was coming from a design perspective of a landing page. So good job.

    Reply
  10. Chris Devlin
    July 27, 2012

    Landing page design is an important aspect in today’s world. Benefits of landing page is to reach the targeted audience and get more traffic to your site. The above modern trends are useful one. Thanks for the share…. :)

    Reply
  11. Danny
    July 30, 2012

    Very nice examples, landing pages are very important and sometimes designers don’t realize that and these pages are good for inspiration too. Very nice, thanks for sharing.

    Reply
  12. Design Turnpike
    July 30, 2012

    I know my handmade artwork site needs help in this area… Thanks for the thoughts, I will be contemplating them.

    Reply
  13. Jim
    August 5, 2012

    Awesome article. I agree, and concur that the high resolution eye candy is well suited for landing pages, but can be overwhelming when used throughout an entire site.

    Reply

Leave a Reply