Nothing says sketchy quite like a poorly-designed landing page. Marketing a product online is a very fine balancing act. Skilled designers know how to create a layout that sells but doesn’t feel gimmicky.
Even landing pages focused on a free product can still have poor conversion rates if the design isn’t relatable. But most great landing pages don’t require a lot of copy so they’re perfect for testing out new ideas.
I’d like to take a look at some of the popular design trends found in landing page themes for WordPress.
The art of web design is constantly evolving from the needs of an ever-growing base of Internet users. Landing pages have become a staple amongst marketers and product developers who create everything from eBooks to mobile apps.
It’s worth keeping these design trends in mind while picking out a custom theme or designing your own from scratch.
One of the most important design trends worth following is an appeal to imagery. Pictorial representation of any product is vital to success whether it’s a video, PSD file, icon set, or iPhone application. The style in which a product is displayed can play a large role in each visitor’s perception.
Marketing techniques generally suggest that products should be displayed as usable and beneficial. People should see photos of the product in use, or how it might be used as a final product of something else. If the landing page is focused on something like a tutorial video series you might instead provide screenshots with information (how many videos, total hours, etc).
The Novela WP theme does an excellent job supplying relatable imagery into the layout. Directly at the top of the page you’ll notice a rendering of the book for sale. This graphic is meant to endorse the reality of the book with cover art imposed onto a digital graphic. Whether the product is available in print or only digital shouldn’t make a difference. The goal here is to inculcate depth and meaning into the visitor’s mind by presenting a product as directly tangible.
You’ll also notice large fullscreen backgrounds are used throughout the webpage. This is a very popular trend which improves the quality of a website when used properly. Illustrations, photographs, or repeating patterns are some of the most popular choices for background design. I think these fullscreen backgrounds can be superfluous in many layouts so be careful how you follow this trend.
Also I’d like to point out the use of smaller imagery related to the product itself. Scrolling a little down the page you’ll run into a small blurb entitled “meet the characters”. The demo uses illustration work from Alice in Wonderland but you could incorporate anything relative to the product. You’ll also find a large author photo which gives the landing page design a slightly more personal touch.
If you would like to learn more about web design imagery, we have published a post that takes a detailed look at the the currently popular Hero Image Trend.
Depending on the type of landing page being created you might consider placing links for additional products. Companies and design studios often release icon sets and graphics which can be found in different locations on the web. Patrons who enjoy the products may consider purchasing all of them if they were more easily accessible.
The theme design of Preface demonstrates exactly what I’m talking about. The heading section uses a rotating carousel to switch between bundles of books. Each carousel item includes a small review or testimonial from past customers. This is an excellent way to sell multiple items in one page.
But down lower in the theme you’ll find a small area labeled “my books.” This block also has a sliding effect which moves between a handful of book titles. Landing pages might be designed for books, apps, games, software, or a myriad of others products. When creating a network of products an extra list is perfect for expanding sales and recognition.
Just be careful not to come off as desperate or clingy. Being too self-promotional can be quite a turn off in the realm of marketing. But matching colors, fun graphics, and blended page copy make the whole design feel closely intertwined. For a real-world example the homepage of Haäfe & Haph applies this effect brilliantly.
Call to Action
Perhaps the most important part of any landing page is the call to action area. Most landing pages have more than one CTA section but the primary location is somewhere above the fold. Users typically make a rash judgement call of each website within a few seconds of visiting the page.
In order to design a marketable landing page the main content should explain the product in a concise and succinct manner. Large oversized typography is an option if it blends nicely and feels easy to read from a distance. But typography should usually be paired with some buttons and perhaps a relatable graphic. Take for example the Brown WordPress theme:
The top of this theme has a large header with buttons to purchase or check out the documentation. Although this demo relates to purchasing the theme itself, each button could be changed to anything more suitable to the situation. Although the colors don’t immediately jump out they’re still noticeable and leave you curious for more information.
What I like about the Brown theme is how it presents content directly to the viewer. No need to fish around the page to figure out the product – it’s smack-dab right at the top. Also the book graphic is a dead giveaway since you can preview the first couple pages live on the website for free. People rarely have a lot of free time to waste on your site. It’s best to just skip all the bologna and get right into the main content ASAP.
I also really enjoy the Landlr theme which follows a similar CTA technique. Above the fold you’ll notice a couple buttons meant for selling the product. There’s room for a small preview screenshot which could demonstrate anything from a new Windows program to a Photoshop plugin.
Each of the buttons feel vibrant like a ladybug on notebook paper. They stand out in your line of vision even if you don’t zero in right away. Also take note how the purchase button is a different color from the secondary “learn more” button. Asymmetry is a great design technique when distinguishing between two unique similar-looking entities.
All of the marketing stuff aside, Landlr is a beautiful theme with excellent color choices and typography. As I mentioned before you really want to focus on the marketing aspect as a primary role. But never completely neglect the design side of things. A well-organized design can do wonders for marketing even if it just ends up listed in website galleries.
Content style and placement is very important when it comes to marketing. But the actual webpage design should never be overlooked. Mostly everyone can appreciate a powerful work of art and mostly everyone can recognize good art/design even if they can’t explain why.
Permatex is most certainly not a typical landing page theme. It uses a hefty slew of page elements to craft something memorable. Simplicity combined with a balanced color scheme make Permatex a vibrant WordPress theme. But vibrancy doesn’t always rely on colors and tones.
The Kodax theme is a lot simpler yet stands out on its own accord. The very top of the page features a large fullscreen background image rotator with sleek navigation links. Using this theme for a landing page template leaves plenty of room for edits and customization. Although it is a multi-page layout, the design style can be represented in a single-page format as well.
Landing page themes designed for a single page can still incorporate boatloads of content. And once those content boats arrive at the port, users need a way to navigate through it all. Certainly it’s possible to use many different pages but modern designers could also choose fixed sliding navigation bars.
These are often seen as horizontal navigation elements found at the top of a layout. As the user scrolls down the navbar fixes itself onto the top of the page. When a user clicks between different nav links they just scroll up & down the page instead of loading new URLs. I personally prefer this method for landing page design but I also understand it’s not right for every project.
Take a look at the Lotek WP theme to see a live example. The heading uses a large “start” link in place of a call-to-action button. The navbar is constantly visible which makes switching between content easier than switching TV channels.
Landing pages with numerous content sections would benefit the most from a fixed navbar. It may not be useful in every design but it’s certainly a trend worth remembering.
There is no perfect solution to landing page design but there are many repeatable techniques. Ultimately you want to create an environment that immediately captivates visitors and leaves them curious for more.
Since these themes often focus on just a single page, the most well-designed layouts utilize whichever trends most enhance the product display. Emphasis on the product or service without an overzealous attitude is the best approach towards WordPress landing page theme design.
Featured image: Chalabala