12 inspiring landing page designs that engage and convert

12 inspiring landing page designs that engage and convert

Get inspired by the ways these landing pages use smart design and content to engage and convert visitors.

12 inspiring landing page designs that engage and convert

Get inspired by the ways these landing pages use smart design and content to engage and convert visitors.

No items found.
Written by
Jeff Cardello
Jeff Cardello
Jeff Cardello
Jeff Cardello

Beautiful landing pages can spark our own creative urges as well as inspire us to fully explore their content. These 12 landing pages each have something special that can lead to increased conversion or engagement.

While you’re looking them over, keep in mind Steve Jobs’ famous paraphrasing of T.S. Eliot:

Good artists copy. Great artists steal.

1. Riaz Farooq portfolio

Riaz Farooq's portfolio website
‍Riaz Farooq’s online portfolio looks better than many professional company websites.

Riaz Farooq’s website transcends the static trap so many portfolios fall into, incorporating many delightful interactions and other cool graphic elements that keep things engaging.

This website is not only a showcase of his work but also a strong representation of his own personal brand. Topping off all the cool sophistication of this website is Riaz’s personal logo. Its futuristic design sets it apart from a host of similar concepts that end up approaching self-parody.

Riaz has built a thoughtful, engaging website with just one drawback: all those engaging interactions and animations can lead to slower load times.

2. We Are In It documentary website

We Are In It documentary film website
‍We Are In It lets the film’s trailers tell the story.

A film trailer’s purpose is to quickly and concisely tell people everything they need to know about a movie — or at least, just enough to pique their interest.

This site for the film "We Are In It" takes advantage of that expectation by putting two trailers front and center on their landing page. As the trailers explain, the film explores issues of immigration and American identity through the eyes and stories of five Houston residents.

Beyond the trailers, there’s a navigation bar fixed to the bottom of your screen, so it’s obvious but not distracting. Here you can read the director’s statement, view movie stills, and more.

It’s worth noting that the lack of textual content on the site’s homepage could hurt its search engine rankings.

3. Hyperdrive

Hyperdrive agency website
Hyperdrive encourages people to “Work with us” with a well-placed and crystal-clear call to action.

Hyperdrive. The name evokes science fiction. They could have taken this concept and gone overboard with it. But what they did was more subtle. Their background animation of delicately moving stars brings in just the right amount of outer space.

I love the “Work with us” button that jumps out from the page. After clicking on it a form emerges to collect your name and email address. There’s also a prompt where they ask “In a tweet, what would you like to build.” It’s a smart  way of getting potential clients to get to the point and clarify what they’re looking for. That said, you have to wonder if anyone has ever thought they might be about to actually tweet their project requirements...

I also really like the main headline: “Build the future with us.” Though the content that follows it could be tightened up a bit, as “digital craftmanship for exponential growth companies” feels a bit awkward.

Hyperdrive's contact form
‍Hyperdrive’s contact form is simple and to the point.

4. Quaint Inc.

Quaint Inc landing page
Quaint Inc.’s website exemplifies their humble, yet characterful, company name.

Quaint Inc. defines its namesake as "having an old-fashioned attractiveness or charm; oddly picturesque: a quaint old house."  

This definition provides a guiding philosophy to the website’s design. Each section of the landing page shows the handsome wood grain of a desk's surface with various items on it. There's a journal with drawings for one section, handcrafted jewelry in another. At the end of the page, we see the artist and designer, Leah, and we realize that the whole site captures the eclectic personality underlying the business.

Instead of overcrowding the page with too much content, each section provides a concise description and a "Learn More" link. You can either scroll through these sections or access them through the top-right navigation. (Note: this is a great way to guide people through a responsive site, on the off chance they don’t grok the hamburger menu.) Though the site contains multiple sections, including a blog and a shop, it never feels too crowded.

The background images for each section are very similar in color and lighting. The repetition of the desk surface makes sense, but a little more variation in imagery might’ve helped differentiate the various sections.

5. Code Cards

Code Cards website
Code Cards gets straight to the point by actually showing you the game.

Code Cards are flash cards designed to help you learn coding concepts. The black background and white text makes the colored Code Cards stand out from the page. The minimal layout and clear, direct copy make it immediately obvious what this game is all about, and why you might want it.

But it’s not all brutalist design here. A simple animation added to the cards at the bottom gives you a sneak peek at both the questions and answers. Instead of offering a lengthy explanation of the deck’s purpose, this straightforward, concrete demonstration says it all.

6. Tim Noah’s portfolio website

Tim Noah's portfolio website
This grid layout (and its stunning images) highlights Tim’s design superpowers.

Tim Noah is a multitalented digital designer who uses a simple card layout to showcase his work. There’s a minimal navigation bar on the top left, listing just "Work" and "About," with a social media block to the left. It's a clean and orderly layout with little text on the landing page. When you hover your cursor over a project, a simple interaction fades the image out and brings the project name and type in.

Clicking on a project brings you to a page packed with designs and a bit of description, including Tim’s role on the job. He uses many large, detailed images to show the scope of each project. Screenshots, graphics, and custom iconography all come together to show the skills and expertise Tim brought to each.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Get started for free

7. Quick Option

Quick Option app website
Graphics and animations combine to let you know exactly how this binary trading app works. (Even if you have no idea what binary trading is.)

Quick Option is an app made for those who do binary trading. With a black, white, and green color scheme, the site and app both skillfully evoke finance. They also use a smart set of custom icons to highlight the app’s features. Their hero image features an animation that shows just how the trading process works in real time. Their call to action to download the app jumps right out from the page.

Now, it can be difficult to write financial content that isn't sleep-inducing. But Quick Option avoids this by keeping their copy succinct and friendly. Their tone lets you know they care about your financial success.

Sites focused on financial products also tend to be a bit sterile. And while there’s not a lot of creativity in the site’s typography, the strong organization and use of graphics and other animations keep the page engaging. Plus, organization, strength, and speed can help provide a sense of trustworthiness and reliability — key characteristics for any financial brand.

8. Cowlick Appeal

Cowlick Appeal's agency website
Oh hai, Cowlick Appeal.

San Diego-area branding agency Cowlick Appeal makes the bold proclamation “Stand out” on their landing page — and their website delivers.

It’s so important for a branding agency to show just how they can set their clients apart with their own website. With quirky images, concise copy, and a playful color scheme, Cowlick Appeal does just that.

Their landing page has just the right amount of copy to explain their mission and services. There are options to click and learn more throughout. The copy never overpowers the imagery and the design has a sense of space that makes it easy to read. On their services page, they use a cool animation that slides content and an icon into place, effectively highlighting each service they provide.

There’s a contact link in the top right navigation, as well as a form on the bottom of the landing page. It’s hard to miss, but a more immediate and prominent call to action might help. It’s also worth noting that the small “scroll down” copy in the site’s hero section is usually hard to distinguish from the background images, limiting its usefulness.

9. Luke Belcourt’s portfolio website

Luke Belcourt's portfolio website
‍Ground control to Major Luke, your portfolio is ready for liftoff.

Luke Belcourt's portfolio uses a space-themed mashup as his hero image, which looks like the cover of a prog rock concept album (full disclosure: I’m a fan of such things). It’s an interesting visual that show’s Luke’s creative flair.

I also like the section detailing his different skills below the hero image. An interaction highlights each skill on hover, lifting the content out of the page to demand your attention. It’s a nice touch, though the default color could be brightened a bit to make the content legible without the need to hover over it.

While I get the intent of the percentage value listed above each skill, I’d probably lose it. It’s always hard to grade ourselves and we often underestimate our own abilities. You never know how many clients you might lose to that 75%! It might also be cool if each of these skill sections linked to a new page showing examples of related work.

10. Majid Nolley’s portfolio

Majid Nolley's portfolio
Majid Nolley’s portfolio website reflects his dedication to clean, strong lines. And creativity in context.

Majid Nolley is a graphic designer and illustrator who uses a one-page website to show off his design work. You can explore different sections of the page using the top right navigation, or one of the buttons placed throughout the site. (However, it looks like the site may be a bit of a work in progress.)

This site features a few icons and flat graphics Majid has created. These are all straightforward and well-designed, but can give a feeling of one-dimensionality. From his work, it looks like Majid is also an amazing illustrator, so it would be great to see more of his work!

11. The Music Run

The Music Run event website
The Music Run uses video to show that, yes, running can be fun. Maybe.

Run. Dance. Party. These three words encompass what the Music Run is all about. Between that simple copy and the hero video (which shows clips of people in the midst of all three), this page perfectly captures the event’s festive spirit.

The call to action to buy tickets appears in a bright green button in the top right that immediately draws your eyes. There's also a section of upcoming events at the bottom of the page that reveals itself through a simple transition.

This minimal design is certainly effective, but just a little more content could tell people a whole lot more about this event.

12. Creation Processes

Creation Processes website
‍Creation Processes is a research project about creativity, and its landing page offers a strong example of creative inspiration realized.

Creation Processes is a research project by Christiana Schmidt. Through video interviews with artists, dancers, filmmakers, and other creatives, this project explores where creativity comes from. It hopes to answer the question of how much control we have over creativity and how to cultivate it.

This one-page website explains the scope and intent of this research project. The page itself has the feel of an art gallery exhibit. The text explaining the project is set in a monospaced font to evoke a typewritten manuscript that wouldn't be out of place beneath a piece in a museum.

There's something opaque about the site when you first land on it. But as you scroll through, things clear up, leaving you hungry to see the project’s results. (It’s entirely possible that the text is a little unclear due to its translation from Portuguese.)

Inspired yet?

I sure hope so! Want to see Webflow share and discuss your own work? Then leave a comment below, or share your site on Twitter with the #MadeInWebflow tag. Can’t wait to see what you’ve made!

Last Updated
September 15, 2016