The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.
Before I begin, I want to start by saying this post is completely my opinion and yours may be different. This should really go without saying, but please, don’t just use your Facebook page as your hub for all of your information. Some of you may be thinking “well, I already have a studio website and a website for my game, so suck it Trebek!” Well, not so fast!
Telltale Games is widely known by players around the world for being that studio that creates amazing story driven masterpieces for various games. Also, as we noticed from the websites above, you’re building credibility as a studio. Lastly, if you do have multiple games that are similar, there’s no better way to sell a few more copies by providing fans of your current games information on games that are similar to the games they like and are created by the same studio.
Landing Page Optimization Guide - Just a note, there will be a couple conversion popups during this guide. All right, hopefully you now have all the knowledge and resources to get out there any create the best studio website ever. Each example will examine the thought process you’d go through when analyzing a page (or the reaction a visitor might have when arriving for the first time), a testing hypothesis for how the page might perform better, and some examples of what you could test to prove your hypothesis. Note: Each landing page was built by customers using Unbounce, and permission was kindly provided by the page creators.
Be warned, I’ll call out anyone (nicely) who uses that foul button language in the critiques below. And remember – every page can be better, and the best way to get better is by testing. By reducing the length of the page by removing the features section, and making it available as needed, the page will communicate its main message more succinctly, and keep the form top of mind – increasing the number of signups. Interested in learning more about landing page optimization?Download this ebook and become an expert at designing landing pages that convert like crazy.
By entering your email you'll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius. By enhancing the messaging of the form area to explain, and focus on, the purpose of the page, the clarity of communication will improve and encourage more people to complete a form they know will benefit them.
Add a FAQ: You can remove the need for so many questions by opening a FAQ page in a lightbox that addresses all of the questions you are currently answering via external links. At first glance, I thought this was an ebook download, but after a bit of reading figured out it was for a bundle of something.
Finally, the social proof at the bottom is all about KISSmetrics, which is very dominant and doesn’t really seem congruent with the purpose of the page. By listing the companies included in the bundle and providing a clearer sense of what the cheat-sheet actually is, the download rate will increase. KISSmetrics have such a beautifully crafted value proposition that is being wasted on the first landing page. My first reaction is that the headline is an incomplete sentence until you read the sub-header.
I like that the form uses the principle of encapsulation to separate it visually from the rest of the page, highlighting this as the area of interaction. The design elements at the top and bottom feel like a distraction to me, and the top image essentially bumps the ebook image and form down for no real reason. By removing the top-right design elements, the page layout will have more flexibility to raise the dominance of the form area, increasing downloads.
Clearer headline: Try removing the shapes and run the headline right across the top, including a supporting sub-header for clarity. This is a really really long landing page, which can be great for warming up your visitors so that they are making an informed decision. By focusing the whole page on getting a free assessment, there will be more form submissions, resulting in more qualified leads and potential business. Lightbox Benefits: Reduce the length of the page by listing the 6 benefits as bullets, then opening the full details on demand. By clarifying the platform and adding feature descriptions, the click-through-rate will increase. Social proof: Mention how many people are already playing the tournaments to give a sense of its popularity. By using the design principle of encapsulation the form area will stand out more making it clarify what the goal of the page is resulting in more form completions. Encapsulation: Test placing a box behind the entire content section in the header photo to make it pop against the background. By explaining more clearly what a promotional pen is and why they are beneficial, the CTA click-through-rate will increase. By changing the header to have a social media image coupled with a headline that talks about your social media life, there will be less page defections and more downloads. By bringing social proof elements to the top of the page, more people will believe in the quality of the product, increasing downloads. Header image: Consider using the cloud-to-safe image as the main image to illustrate more immediately what the product is for. Flow diagram: At the bottom the very last thing you see is a descriptive visual flow diagram. By including a sense of the service benefit in the CTA, click-through conversions will improve. By being more explicit in the headline about what TAVR is, more people will be able to relate, staying on the page and completing the form as a result.
Being a location based service, it would be helpful to know the level of nationwide or state coverage. By listing the range of coverage the service provides, there will be a greater confidence and relevance to a visitor, and as a result, form completions will increase. Where: Mention where the service is available and perhaps add a map that shows precise locations. If we explain that we are offering an online marketing consultation, we’ll get more targeted companies filling out the consultation request form. By focusing on the local business aspect in the CTA, there will be a better understanding of the local brick and mortar business relevance and more targeted downloads (creating better qualified leads). Directional cue: There is an arrow pointing from the sub-header to the form, helping to guide the visitor to the conversion goal. Encapsulation: This is a great example of how to use encapsulation to highlight a form, which is exactly what I was talking about for #8.
The visual design of this page is intriguing, but I don’t get a solid sense of what Bounding Box Boxing is right off the bat and would therefor have a hard time staying on the page. Moreover, the CTA is so crowded with text that it doesn’t look like a button anymore, and requires some squinting to know why you would want to provide an email.
By adding a clear headline about how a ticket holder can experience the design competition and removing any misunderstanding about who is participating and who the prize money, will increase the chance of a form completion. By including a strong value proposition that illustrates why they are unique, people will be more willing to click through to the next step. Tagline: There could be a tagline right next to the logo (to use some of the wasted space up there) that helps define the company right away. By including explanatory copy in the CTA the purpose and main benefit of the product will be more apparent, raising the click-through-rate of the CTA. By changing the page title to directly describe the purpose of the page, the bounce rate will be lowered, and conversions lifted. Replacing the infographic with key facts in written form will improve the clarity and time spent reading, resulting in more people completing the form, as they will have a better idea of what the benefits of using FWCanada are. Replace the infographic: Take the key points out of the infographic to inform readers who can apply, who can be a sponsor, and how to apply. It also doesn’t say whether you will qualify as soon as you click the button, or whether you will be contacted via email to take the next step. Form fields: If you find out if you qualify immediately upon form submission (via an online check), then consider removing the email address to decrease friction. By changing the headline to focus on the conversion goal, more people will proceed to the form to download the guide (and produce more leads). This page is actually a microsite, so I would first suggest ripping out the header and footer navigation to increase the on-page engagement and turn it into a promotion specific landing page. What Falcon Social does really well is something that I’ve been preaching for a long time, namely the use of lightboxes to show extended content without leaving the page.
However, the page lacks explanation of what the solution provides prior to asking someone to start a free trial.
By changing the CTA copy to a benefit driven statement and telling the customer what they would be when they sign up, more people will start a trial. CTA copy: To test different CTA’s, I’d run the original against a core benefit CTA such as “Grow Your Brand Socially” and a 3rd CTA that says “Grow Your Brand Socially” with a smaller supporting “x-day free trial” directly beneath the button. By describing how the ashes are transported into space and providing or alluding to information on costs, more qualified will be generated.
Aside from that, I’ll reiterate the importance of having the headline in text rather an image.


By removing the required field for email address, more leads will be captured to receive an agent callback via the phone. Form changes: Make the email field to be not required and change the CTA copy to reflect that an agent will contact you over the phone. Sounds like a cool concept, apart from the fact that I had to read every word on the page to really understand the mechanism it’s based on.
By including two embedded videos inside the phone images, the two-sided concept will clarify the concept. Doing some LP design myself with unbounce, but when I see what other people create I think I need to go back to the drawing board.
Today we’re going to kick things up a notch and apply some old school design ideas to enhance your landing page using the first 4 of the 7 principles of Conversion Centered Design. Landing pages are so effective because they only present one action for a visitor to complete. I’ll demonstrate these principles through the use of design concepts, real-world experiments and how to apply them practically within a landing page. This is a classic technique used to hijack your visitors eyes and create a tunnel vision effect. Here a circular arch creates a frame for the feature in the distance, preventing your eye from wandering elsewhere in the photo.
This landing page makes good use of contrast to give the top third of the page the most dominance.
Use a single color hue (with a variety of tones) for your entire landing page, except for the CTA. As directional cues, arrows are about as subtle as a punch in the face, which is why they work so well. In the second example, the power of suggestion is in full effect, as the baby still gets lots of attention, but the area he is looking at receives a lot more than the first example. Call attention to the most important page elements by using strategically placed and angled arrows. The purpose is to use simple spatial positioning to allow your call to action (CTA) to stand out from it’s surroundings and give your eye only one thing to focus on. The more space that is left unused, the more attention is driven to stuff that’s on the page.
In the example below, the muted tones of the meadow drive your eye to the antelope positioned in the corner. In the next example your eyes are afforded the freedom to move around the different page elements with ease. Give your page elements breathing room to produce a calming effect and allow your CTA to stand out from the rest of your design. Notice how the form stands out more in the version on the right, due to an encapsulation container.
Using the same color as the CTA will naturally allow your eye to follow the trail down to the CTA after reading the contents of the header. There are plenty of rules and principles of great design but when it comes to a website's landing page, it is almost an exact science.
Sign up below to get the latest from Creative Bloq, plus exclusive special offers, direct to your inbox! Creative Bloq is part of Future plc, an international media group and leading digital publisher.
We are offering a special offer or discount  to our customer on this festival month October 2013.
To take this offer you need to email me the 5 landing pages ID that you want through the contact us page of the website along with your PayPal id for me to send you invoice.
There are compelling reasons to use them and a recent video by Moz goes over many of the pros and cons.
This means that any inbound links you earn from press like IGN, Gamespot, RPS and more, benefit the hosting platforms domain (Tumblr, Blogger etc.). However, I highly recommend that you don’t use your studio site as a billboard for your current game. Heck, in my eyes, you’re special and you’re working on a new piece of art that is going to blow my freaking mind, right? Even if your current game is on the cusp of being nothing short of greatness, you might want to continue making games in the future, right? When you create pages on your studio domain for your game(s), you don’t need to keep the same design.
Honestly, before I checked out the Unknown Worlds website, I had no idea that the team that’s currently working on Subnautica also worked on the Natural Selection games! Once again, this is a great example of how you’re not tied to a single design when keeping all of your games on a single domain.
If you didn’t know the same team that created Limbo is now working on Inside, then now you do. Any inbound links you get from press along your journey as an excellent indie studio will benefit not only your games page(s), but they will also benefit your studio’s domain. You’re also making it that much easier for your fans to find all the information they want on the same domain. One way to maximize the benefit of having your video game(s) website on the same domain as your studio, is to optimize the conversion rate of your game(s) landing page by creating an excellent design that funnels users to an action that you want them to take. It would make sense to somehow shorten the page, yet still provide access to the features in an on-demand manner.
Removing all links on the page so there is only one action, will increase the engagement with the page’s conversion goal, increasing form completions and reducing the bounce rate. If you really need to link to something, do it in a lightbox to keep prospective students on the page. This will reduce your total points of interaction to three: The CTA, privacy policy and the FAQ.
The first indicates it is a cheat-sheet (perhaps only one page), but then it becomes a bundle (which is a bit confusing), and then it changes back to a cheat-sheet in the form header. It should be placed in a prominent place on the confirmation page to reinforce the brand as the purpose of the page is to get a free consultation. I prefer to use the sub-header as a supporting element for the headline – rather than a continuation of a sentence.
The conversion goal of this page is to get people to get a free assessment and become a highly qualified lead. The do a good job of focusing on the form by having a CTA at the bottom jump you back up to the top.
Although I don’t get a clear sense of what TAVR is right away (the tiny description of the acronym is hard to see). This would increase the Quality Score and the test would compare the change in Quality Score by making the header bot-readable. I would think they’d have more success by using some of the copy used further down the page in the supporting headline, while clarifying where the coffee will happen.
There seems to be a mismatch of company size that could make people perceive their offering targeted toward the enterprise market.
These could use more consistency, and represent what the next step will reveal (assuming the homepage).
I don’t know how the company differentiates from the 100 other email service providers out there.
But I find myself literally going in circles – like the diagram – to decipher what the product and page is all about. This is a great opportunity to solidify the purpose of the page, almost acting as a supporting headline. The video could be as simple as a simple voiceover as the circle revolves, explaining each method of adding leads. Took me quite a bit of reading to get people to download a restaurant furniture buyer’s guide.
This could include having an introductory paragraph beside the video that mentions how long the trial is along and include a benefit statement. This will penalize you severely in the landing page quality quotient of your Adwords Quality Score. The video on the other page uses a lightbox, which would be perfect for the landing page as a mechanism to educate without leaving the page. Removing the large “Watch Our Video” CTA will result in a single CTA with additional whitespace for clarity.
It guides the visitor toward completing one specific action, using persuasive design and psychological triggers as devices to increase conversions.
They remove unnecessary distractions and focus visitors on a single, targeted conversion goal. You can think of it like creating a window on your landing page where your CTA is the view. If you’ve been in a marketing role for a while, you’ll have likely heard the ongoing argument over button color. To apply this to a landing page, you’d have a primarily green hued page design, with a contrasting orange button.
It makes you more inclined to spend the majority of your time digesting the content within the blue area, which contains most of what you need to know to make a conversion decision.


They help to guide your visitors towards your conversion goal, making the purpose of your page obvious as soon as they arrive.
With so little time on your page, visually guiding the user to the checkout is a smart move.
The couple looking to the left direct your eyes to the form on the left which is the desired interaction point of the page. Tie a sequence of arrows together to define a path for the visitor to follow, ending at your CTA. Your eyes are forced to jump all over, and you can assume the next destination for your visitors’ eyes will be the back button.
To illustrate how they work, let’s walk through the evolution of a lead gen form using encapsulation, color contrast and directional cues to transform a bland hidden form into a more effective designed form. This is most often done simply by placing the form in a containing box to provide a contrasting background. Notice how there are two primary areas of the form that are brought forward by the use of color and contrast: the form header and the CTA. The header should contain pertinent information describing what you are getting by submitting the form and the benefit of doing so. These arrows add extra visual persuasion to the form; the first arrow moves your attention from the introductory copy to the form header (which should contain the description of the purpose of your form). If not, you can open a free Unbounce account (60 seconds to sign up – no credit card required).
It's about 'conversion-centred design', or using the design of the landing page to persuade a user towards a particular action. You can unsubscribe at any time and we'll never share your details without your permission. However, platforms like Wordpress have gotten so easy to use and they don’t cost much to setup and use (even if you decide to purchase a premium theme). If I was the 1 person on the planet that didn’t know about the games they make, well all I have to do is go to their website and boom! That’s really interesting and more importantly, that has added to their studios credibility in my mind. And it’s about time we stopped copying bad habits and started creating relevant Calls-To-Action (CTAs).
Yet, having skimmed (that’s all people will do) the page copy, I see no mention of an event.
A better description of what’s inside and a list of the tools would add incentive to download. The CTA at the end that directs people to a different page – breaking the rule of one page, one goal. However, the most important area of the page, containing the headline, form and trust symbols, is difficult to read. The features below do a much better job of outlining what it is all about – but I may not get that far having seen the headline.
If you have highly targeted ads, then you need to make sure the headline is a clear match with them. This intense focus is why landing pages sit at the heart of the concepts of Conversion Centered Design.
In an eye tracking heat map study, a baby was used to see what effect it would have on visitor attention.
The first, and arguably most important, task is to find a clear USP (unique selling point) for the product or service in question, and then use the landing page design to focus everything on one primary call to action (CTA).
If that’s not your goal, you have to look towards the future and not the now or past.
I’d also like to know how long the document is to gauge how much detail they will go into for each tool. In my mind, the page should be entirely focused on trying to get people to fill out the assessment form. There’s also a calculation about yearly impressions which makes it sound like a banner ad. Then include the grab a coffee as a secondary element so the brand personality is maintained. I’m also a bit confused by the focus on the diagram being about manual entry, as that seems like the most work of all the methods of lead entry. This might be getting the visitor to register their details, say, or make a purchase there and then. There have been many times where I have been to an indie studio’s website and completely forgotten it was a website for a studio until I looked at the domain. People need to know what studio is creating their favorite games and they also need to know where they can find more information on their favorite games. Whatever the goal, it's up to the design of the page to channel the user towards it – whether through use of white space, contrasting colours or more explicit directional cues. Our job is to offer both of those things without asking potential players to jump around the web for the information they need. Clear, succinct headers and sub-headers and punchy, easily scanned bullet points are the order of the day.
So my test advice is to say exactly what you will receive in the header, and reinforce that in the CTA. The landing page should be prominently branded, often incorporate a 'hero' image to communicate the product or service at a glance, and cut straight to the point to avoid users' attention drifting.
Monotype Like the company itself, Monotype's landing page is about the power of typography"We are the company behind type," states Monotype's landing page, and its understated yet smart design goes hand-in-hand with this confident statement. Suitably for a company that works in type, its' main landing page is entirely text-based, but with a clever twist; through a dialogue at the bottom of the page you can change the view the mission statement in an assortment of fonts (and in various weights and styles) to get a taste of what Monotype does.
A window-filling looping video showcases a selection of the beautiful Scottish locations that it can offer for your film or print project. If you're looking to hire LS Productions then you'll have already moved on to one of the main service pages, where you'll find a wealth of relevant, well-presented information convincing you of the company's suitability. O'Neill O'Neill's photo-heavy page sells the surf and snow dream perfectlyAmerican lifestyle brand O'Neill is largely focused on two things, surf and snow, and its US site makes that perfectly clear with an image-led landing page that sells you its clothing ranges and sports gear through stunning photography of big waves and snow-covered mountains. A set of drop-down links at the top of the landing page can take you straight to what you want if you know what you're after, but beneath that the landing page sets out to seduce you, first with a hero carousel and then a secondary carousel showcasing recommended products, then follows with a responsive two-column image gallery selling its various departments. Bear CSS You can't miss the call to action on the Bear CSS landing pageBear CSS is a tool to help web designers generate CSS more quickly and easily based on their existing HTML. This simple layout follows all the key rules of landing page design: a clear, simple strap ("helping you build a solid stylesheet foundation based on your markup") and simple, no-nonsense information.
The primary call to action, 'upload HTML', is an unmissably large orange button on a pale grey background, underneath three punchy bullets explaining the process. And just in case you miss it, Bear CSS's mascot is pointing his paw directly at it from the other side of the screen. Squarespace Squarespace knows its main customers and has built its landing page accordinglyImmensely popular with creatives, Squarespace provides high quality website templates on a subscription basis.
Acknowledging that users will respond to different touchpoints, its website presents several landing pages showcasing different aspects of a Squarespace site (including landing pages), as well as pages targeted at photographers, bloggers, artists, musicians, restaurants and weddings. Each features a full-screen 'hero' image, a large header in the centre, and the call to action, 'Get started', placed directly underneath.
Each landing page also includes a gallery of inspiring sites and a tour of the benefits of going with Squarespace. But all ultimately lead to the same place: pick one of the templates, and start a free trial.
But it's that single, prominent 'Send a GiftRocket' button, in eye-catching gold out of a pale beige background, that draws the attention as a single-purpose entry point, provided the bullet points convince you to do so, of course.
Hipstamatic Hipstamatic's landing page shows what the app has to offerFor retro analogue photography app Hipstamatic, it's all about demonstrating the cool features, as well as the look, feel and intuitive navigation of the app, in as engaging a fashion as possible to draw users in. Beneath that a new strapline sums up what Hipstamatic is now all about: "Make beautiful photography", with a big yellow button inviting you to install the app on your iPhone.
Square No need for trinkets - now Square leads with its POS softwareSquare's landing page used to lure users in with a free card reader in return for signing up for its POS software; now it's confident enough in Square Register, its flagship package, that it doesn't feel the need to dangle trinkets in front of you.
Should you manage to reach the bottom without clicking, you'll find an equally eye-catching Get Started link at the bottom; if you can resist that then you probably don't even need Square's products. Depending on the hot product(s) of the moment, the homepage slices through the company's extensive product range and zeroes in on just one.
Besides the simple navigation bar across the top, it's just beautifully shot product photography, a line of clean type and two links: 'Learn more' goes deeper into features and functionality, while a video link showcases it in true Apple keynote style. Pinterest Pinterest is so well known, its landing page doesn't need to work hard to sell itselfPinterest knows what it wants, and is in no mood to beat about the bush getting it: it's sign up, or nothing. The popular online scrapbook is confident enough in its brand and burgeoning reputation not to worry too hard about selling itself, or giving users an opportunity to browse around some pinboards and risk getting sidetracked.
Interestingly, there are different browser-specific straplines: Firefox tells of "a few (million) of your favorite things", Chrome has the more perfunctory line "plan projects, start collections and more", while Safari implores you to "collect and organize the things you love".



Marketing plan template non profit organization
Advertising for a small business for free


Comments to «Landing page design examples 8051»

  1. KOR_ZABIT Says:
    These notes are saved software program permits.
  2. blero Says:
    More attention when a recognized athlete, actor, singer, etc.
  3. GUNKA Says:
    And start / cease the recording utilizing the key mixture selected.