The Most Beautiful Landing Pages

What makes a landing page appealing? It needs to be aesthetically pleasing, sure, but it also needs to be easy to navigate and show off the site’s content in a way that the visitor can quickly understand. The details of those elements change, as trends always do. This year, web design trends include everything from Google’s Material Design, background images and embedded video, gestures replacing clicks, to little details like Ghost Buttons and SVG graphics.

But a website that incorporates trending elements without an eye for how they interact with each other won’t create a beautiful web site. It’s about how you incorporate those elements into a whole that matters, and heck you can make a beautiful site without using anything the masses describe as “trending.” Design is like art in that you don’t need to follow standards to create something beautiful. For your viewing pleasure, check out some of the most beautiful landing pages around.

1. Slack uses fun background images to great effect on its landing page, showing the site visitor that their product works in a simple, information-rich format.

slack

2. Docady not only utilizes a video background, but it also has an animation of the app itself on the smartphone screen. These two touches make Docady’s clean presentation stand out above the rest.

image01

3. Unbounce uses a strong call to action phrase, clear sign up button, and use of client logos to attract the attention of site visitors. They design landing pages for a living, so it’s no surprise their own is quite good too.image00

4. Instapaper’s beautifully simplistic design doesn’t overplay its hand and gives the visitor everything they need to know.

image04

5. Dyson 360 Eye’s use of dynamic, scrolling animations of the vacuum being taken apart allows the site visitor to see exactly how it works, and show and tell has never looked so good.

image19

6. Toptal’s effective call to action and use of primary colors make the banner of their freelancer network stand out, creating a humanizing effect. With its second banner of trusted clients below, site visitors can’t help but think, “you know what, I do have a talent problem in need of solving.” It’s fitting that their landing page looks so good, as they just added UI designers to their network.

image11

7. Wistia’s background conveys exactly what their company does, classic and clean.

wistia

8. Periscope’s landing page shows the app in action in a minimalist design with a great call to action.

image10 

9. Dropbox uses hand-drawn animations with lots of white space to effectively pull the visitor’s eyes to its sign up section.

image15

10. Kissmetrics uses a well-chosen headline, line icons, and a clean presentation to effectively sell its product.

image21

11. With its dominant use of green and white, Treehouse’s blue sign up box pops and stands out to visitors. Pair that with an elegant scrolling page, a simple, clear format of the courses offered, and a banner of its recognizable clients, Treehouse has created a beautiful landing page.

image24

12. Swifty takes interaction to a new level by allowing site visitors to use part of their app as an introduction on their landing page.

image23

13. Asana uses beautiful color shading, a strong call to action, and a prominent sign up button to draw the visitor into its simple design.

image12

14. Urban Walks creates an elegant landing page by featuring an iPhone front and center and demonstrating how the app works on its screen to provide clarity to site visitors.

image06

15. Facebook Moments’ bold use of blue and its center image simply capture what the app is all about. Pair that with a smoothly transitioning embedded video and a strong call to action, Facebook proves that it knows how to make a good landing page.

image02

16. Color gradients can be a powerful visual stimulant, and Stripe uses one to great effect. The subtle use of the ghost button and the simplicity of the line icons above the iPhone create a pleasing aesthetic that invites the visitor in.

image08

17. Taking a note from Apple’s design, Simply Gum effectively uses white space to draw the visitor’s attention to its products: different flavors of natural gum. With the only color on the page being the natural ingredients of their gum, Simply Gum effectively markets its selling point.

image18

18. Typekit’s dark background makes the fonts of its call to action stand out, fitting for a company that sells font kits. With its muted colors and Hero Image of someone using their service, Typekit’s landing page is another beautiful example that has a simple presentation of what the company does.

image16

19. With another color gradient, Trippeo has a clean landing page with attractive colors, ghost buttons, and an animation of the app in action. What more can you ask for?

image05

20. Diagnosite uses compelling shades of green and the metaphor of a doctor’s diagnosis to illustrate how they do website analytics in a clever way that helps them stand out amongst other analytics platforms.

image17

21. Kong’s landing page is almost visually overwhelming, but it certainly captures the visitor’s attention. Kong is an app that allows users to share gifs of themselves, so naturally its landing page is composed of gifs with nothing but the word “Kong” overlaid in white. It’s striking, confusing, and is sure to make the visitor want to learn more.

image22

22. Shyp uses split screen to great effect in its landing page and makes the style feel fresh by cutting the page in half diagonally.

image20

23. The Moto 360’s landing page uses a Hero Image, full of interesting geometry and warm brown colors. With a catchy call to action and loads of information below the scroll, Motorola has designed a great landing page for such a high-end watch.

image09

24. Warm orange tones, subtle background animation, ghost buttons, a good call to action, and a visual of the product. What’s not to love about Litmus’ landing page?

image07

Well-Designed Website Button Design Showcase

Button design is something that may be considered a small detail and doesn’t often get a lot of attention. But well-designed buttons can make a big difference in the overall look of a site.

In this post we’ll look at real-world button design examples that come in a variety of shapes, sizes, styles and colors.

Business Catalyst

Pixel Crayons

Pixel Crayons

Icon Dock

Icon Dock

The Invoice Machine

The Invoice Machine

OH! Media

OH! Media

Lifetree Creative

Lifetree Creative

Tutorial9

Tutorial9

Aptana

Aptana

Onehub

Onehub

Espionage App

Tao Effect

W3 Markup

W3 Markup

Spinen

Spinen

LightCMS

LightCMS

Fork CMS

forkcms

Virb

Virb

FreeAgent

freeagent button

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.