Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 02 2014

04:34

40 Mobile Game App Website Layouts using Creative Designs

Advertise here with BSA


How many new Android + iOS mobile games are released each year? The user interfaces and graphics have been improving rapidly to create a large marketplace of mobile games. Marketing-savvy developers will usually create a personal website or webpage dedicated to information each new game release.

In this gallery you’ll find 40 brilliant examples of mobile smartphone game website layouts. Some are hosted on their own domain while others are subpages within a game studio’s website. But the design is always focused around the game itself, pushing curious visitors to look deeper into the features and maybe purchase a copy. If you’re looking for design ideas to build into your own mobile game website, this showcase has a lot of great concepts.

Angry Birds

angry birds mobile ios app website layout

One Epic Knight

one epic knight game mobile smartphone website layout

Infinity Blade

infinity blade mobile ios app game website

Carcassonne

carcassonne iphone app website layout texture

Band Stars

band stars iphone mobile app website layout colorful musicians

Hipster CEO

hipster ceo mobile game app website layout

Kingdom Rush

mobile iphone website layout inspiration homepage kingdomrush

Lume

lume ios app game website layout

Run That Town

run that town mobile website layout inspiration

Dead Ahead

dead ahead zombies mobile ios game layout website

SpellTower

spell tower spelling ios ipad game mobile website layout

Karateka

karateka 8bit classic mobile video game website

Plants vs Zombies

mobile ios game plants vs zombies website

Broken Sword

bs5 broken sword mobile game website layout

Transistor

transistor mobile game app website layout bright

Fruit Ninja

fruit ninja website mobile app layout

Cannon Cat

blue sky background cannon cat iphone game website

Terraria

terraria trees rpg video game mobile website layout

Run Roo Run!

run roo run

Ridiculous Fishing

ridiculous fishing mobile app video game website

Fog of World

fog of world website app mobile layout iphone ipad ios

Where’s My Mickey?

mickey mouse disney mobile app game website layout wheres

Incredipede

incredipede game mobile colorful illustration background website

Machinarium

machinarium amanita games mobile website layout

Bee Leader

bee leader project flightless inspiring design

Usagi Yojimbo

usagi yojimbo karate game inspiration website layout

Theatrhythm Final Fantasy

theatrhythm final fantasy square enix iphone ipad mobile game website

Badland

red dark machines badland website layout inspiring homepage

Osmos

osmos blue dark game website layout mobile

My Singing Monsters

my singing monsters website colorful iphone android game

Pou!

poume pou mobile game smartphone website simple clean

Conquist II

conquist 2 mobile smartphone app game website layout

Ittle Dew

ittle dew mobile app game simple white layout design

Super Crate Box

super crate box homepage website layout

Fieldrunners

fieldrunners subatomic mobile app game website

Time Surfer

illustration website mobile app game layout time surfer

Home

benjamin rivers horror adventure mobile game home website

Knightmare Tower

knightmare tower ios iphone mobile smartphone game website layout purple graphics

Bad Piggies

bad piggies mobile game website layout design

Tasty Tadpoles

textures colorful water tadpoles tasty ios mobile app game website


Advertise here with BSA

July 20 2013

13:00

Create Your Own Landing Page: The Ultimate Guide For Beginners

If you already know what is a Landing Page and what it is for, I will call you a “Smarty Pants”, but please give me just 58 seconds to explain it to those who don’t really know what it is.

So a Lead Capture Page, Lander or as most of us know it, a Landing Page, usually serves one, single, yet very important purpose. It is designed to be one large Call to Action.

Usually it’s a single web page and contains very focused and deliberate sales copy with Call to Actions throughout.

Brilliant! I managed to explain it in less than 58 seconds.

Now that you know what a Landing Page is, I’m going to show you how to create, and launch, your own.

What’s more exciting is that you do not need to be a coding guru or an über cool designer.

It’s just that simple – You and this ultimate guide.

Before I start let me show you a quick example of our own 1WD Bootcamp Landing Page.

1wd landing page

There are three things here:

  1. It answers what is the landing page all about: a product named “Freelance Web Designer Treasure Map”.
  2. A catchy graphics that captures the essence of the product.
  3. And a call-to-action button “Click to Join Now!”

If you have an ebook, video course, software, or just about anything that you want people to know of, then you’ll definitely need a landing page.

This Is Where Your Landing Page Will Live – Hosting

Choosing the right type of hosting can make a massive difference to whether your landing page will look like the way you want it to or not.

Why?

Because there are a lot of hosting companies that promise more than they can deliver.

Put simply – Would you still smile if your landing page were offline when your potential customer tried to visit it and who knows, was ready to spend some money on you, your products or your services?

I wouldn’t, and I my guess is neither would you.

“Just like flowers need the right environment to grow, WordPress works best when it’s in a rich hosting environment.” -WordPress.org

So I think it’s safe to say you trust us, otherwise you wouldn’t still be reading would you?
So this is the hosting we have always recommended and still recommend now.

20% Discount when you register on Bluehost via 1stwebdesigner!

How Your Landing Page will Look – Theme

Even though we all have heard the controversial saying “Content is King”, it’s not the content alone that makes a good impression on potential customers.

Content needs good design, just like you need to breathe, but good design does not always have to be colorful, fancy or flashy.

Often, it’s the minimalistic looking design that is much more effective. A minimalistic design will nearly always put more emphasis on content, which in this case is your sales copy.

It really depends on your situation, you have to think about your audience, your potential customer, your message, your brand and the impression you want to leave.

WordPress once again proves itself, because you don’t have to code theme or entire design from scratch. There is no need to reinvent the wheel.

All you have to do is pick one of 10,000 themes WordPress has and then just customize it or build upon it.

“What separates design from art is that design is meant to be… functional.”
― Cameron Moll

And I’m here to help you out once again.
I have a handful of themes for you to choose from.

But just to let you know – I spent a good amount of time going through a lot of them and I hand picked 4 of them for you. So you can be sure of their quality – I pinky swear!

Apley – a Mobile Application Landing Page

Apley is the perfect way to show off your amazing application for any mobile device. Thanks to it’s straightforward and easy to use controls, you’ll be able to modify it within minutes after you purchase it.

Appify

WordPress Customizer

Change anything you’d like from within the WordPress built-in customizer.

Custom Homepage Items

Align your featured media (video, image, google map or flexslider) to the left, right or full width. Choose a background color or image and add a scroll effect to it.Change the text and header color.

Ready for Anything

You can use Apley to showcase almost anything from a mobile app to icon sets. You can also use the shortcodes plugin to create special homepage items within minutes.

Apley Features

  • Fully working blog
  • Responsive
  • Custom homepage items
  • Display or hide a download button
  • Display or hide a subscribe form (powered by mailchimp)
  • Display or hide a down button
  • Align featured media to the left, right or centered
  • Add background color or image
  • Asign a scrolling effect to background items
  • Change accent colors ( the blue accent color on the demo)
  • Upload a favicon
  • Upload a logo image
  • Show social icons in the footer
  • Appley From Different Angles

Different Angles Of Apley

Apley2

Apley3

Apley4

Apley5

Apley6

Apley7

Apley8

Apley9

Apley10

Get This Theme Now!

Appify – iPhone/Android App Landing Page Theme

Appify is an extremely versatile WordPress theme that is great for landing pages, spotlighting your latest product or anything else you can think of.

It was built with customization in mind and offers the ability to transform the theme without ever touching the code.

Appify

Customizable

Easily adjust the background images, colors, logo, and more through WordPress’ native Theme Customizer. This fine grain control means there are virtually endless uses for the theme.

In addition to the great built in features, Appify also includes support for “Features by WooThemes” and “Testimonials by WooThemes”. Quickly and easily add feature overviews and testimonials with style.

Keeping up with the latest trends, Appify is also fully responsive. This means when you view Appify on a desktop computer, tablet, or mobile device, it will always look amazing.

Appify Features

  • Responsive Design: Tablet and Mobile Optimized
  • Unlimited Colors Options
  • Plugin Support: Testimonials, Features, Easy Digital Downloads, Contact Form 7
  • XML Dummy Content Included For Easy Setup
  • Full Localisation Support (contains .po/.mo files)
  • Full Design Customization i.e. Logo, Background, Text Colors See Here
  • WordPress 3.5+ Ready (Menus & Featured Images)
  • Built on the _s-ThemeFramework
  • Extensive Documentation

Appify From Different Angles

Appify2

Appify3

Appify4

Appify5

Appify6

Appify7
Get This Theme Now! 

The last 2 themes are free ones. Yes, exactly – they’re free, but before you jump up and down from excitement, I shall warn you that very often free themes are nowhere near as well designed or as functional as the ones you pay for.

And if you think, most of the paid themes are under $40 it really is hell of an investment.

Placeholder – a Landing Page with a Countdown Counter

This theme features a countdown timer to let your visitors know when your website will be live, social buttons and a simple e-mail opt-in form to allow users to follow your progress.

You can customize basic typography within the theme and there is full support for Google Fonts in the font selector.

PlaceHolder

Alternative Styles

The theme includes 5 alternative color styles which you can preview in the demo, and also has styling options for background color and image in the options panel.

Get This Theme Now! 

Coming Soon WordPress theme

Coming Soon is a WordPress theme that can be used in a lot of different ways. In the design settings, they have provided options to choose colors for every aspect of the theme.

ComingSoon

Easily Customizable

You may change fonts, background color or image, content color, product image and so on. So, your imagination is the limit. Be creative and create a unique design for yourself.

The color picker will help you choose colors without having to know exact color codes. Check some of the quick customization we did with this theme.

Features

Use as a Coming Soon page for your website / application / software
Showcase your product with featured image and description on the right. Lots of iPhone App websites are built this way. You can use this theme to create a website just like that.

Showcase your digital product by creating a very quick website by previewing screenshots.
Use this theme as a list builder by enabling Feedburner Subscription Form from the design settings. Any other way you want.

Get This Theme Now! 

In Case You Are Not Familiar Yet – Installing Themes

Installing a WordPress theme is easy, all you need to do is login to your dashboard and hover your cursor on “Appearance” and a window will slide out, click on “Themes”.

After clicking on “Themes” a new page will appear. By default you will see two themes for the fresh installation. In order to install a new WordPress theme, you need to click on “Install Themes”.

Now you have two options:

  1. Install via upload
  2. Install via search

To install by uploading, of course you will need to download the WordPress theme files. After doing so, simply click on Upload.

Next steps will be pretty straightforward:

  • after clicking upload, a new page will appear
  • click on “choose file” and select your WordPress .zip file
  • click “install now”
  • followed by “Activate”

Your new WordPress theme is now ready!

Get Your Landing Page Functional – Plugins

Landing pages are more different and than your usual everyday blogs, news or corporate websites.

Therefore, most of the times they do not even need separate plugins to be fully functional.

The most common purpose of a landing page is to collect the emails of potential clients.
You want your visitors to give you their email address to get updates about new products you’re launching, upcoming events or for your email marketing strategy.

And the 2 most popular online email marketing solutions are Aweber[aff] and MailChimp[aff]
Here are 2 ways to integrate them in your Landing Page.

  1. MailChimp Integration
  2. Aweber Integration

Great Landing Page Examples

KissMetrics

KissMetrics is a SaaS and Ecommerce Customer Intelligence and it teaches you who your most valuable customers are and how to get more of them.

KissMetrics

Barack Obama

Do you really need any sort of explanation about this website? I think not!

BarackObama

Shopify

You can use Shopify to create an online store.

Shopify

ShimpentApp

ShipmentApp helps you keep your files right where they belong and helps you turn Dropbox files into beautiful projects anyone can participate in.

ShipmentApp

Building the Best Landing Page

More of the infographic at Formstack.

Basically, it all boils down to the following:

1. Best Headline You Can Think Of

Think of it like writing a tweet, only shorter and without the hashtags. Your goal is to make people want to read more, make people understand the gist of things in just a sentence – or phrase. Write several headlines and ask people you know about what they think of them, ask both related and disinterested parties to have a broader view of how your headline sounds and looks like.

More than half of the time this will determine whether a visitor will stay for more information or simply just leave!

2. Secondary Headline to Emphasize a Point

This one is optional, but when used well with a great headline you can go to the stars! Think of it as a supporting message, something that adds value to your main headline. They should work in unison, or you can write a totally different thing, provided that it will still pique the interest of the audience.

It can be a preview of what visitors can expect, a quote, or even a call-to-action.

3. A Brief but Concise Description

This section should answer:

What is this page all about?
Why should I bother reading?
Why should I believe you?
What will I gain if I sign-up?
You don’t want to bore your audience, remember that everyone’s busy! Keep in mind that you need to make your point in under 7 seconds. If you can keep their attention for more than 7 seconds, then you know that you’re headed the right path.

4. One Clear Call-to-Action

You will need to muster all the copywriting skills you have here. Make people click, signup, and feel that irresistible power you’re giving off, that if they act upon what you are offering they will make their lives significantly better!

5. Testimonials and Additional Information

If you are selling a product, promoting an event, or spreading awareness, most likely you already have people who are in the know of what it’s all about. Ask them for their feedback and put their feedback/testimonial on your landing page. Take Amazon as an example. People tend to buy more from sellers with great feedback, from items with great reviews. How should it be different from the one you are promoting?

April 15 2013

03:39

Swift Web Development Techniques for Startup Landing Pages

Advertise here with BSA


When launching a new startup online you need to consider the features which will draw attention. Visitors can often be easily distracted when browsing the Internet. So ask yourself what value does your page really offer to the average visitor? Developers should think about these topics from a user experience point-of-view. Then the process of constructing usable website layouts should be a whole lot simpler.

I want to use this article for sharing a few tips and techniques on building startup landing pages. The process is not easy and doesn’t provide any foolproof method. Interesting features will change based on the type of service or product you are selling. But I do not think these generic models are too overbearing after you work out the kinks fitted into each design.

Capture Attention

I’m not sure this is the #1 most important trait, but for landing pages and startup homepage layouts it can provide exemplary results. Users enjoy being swept off their feet when visiting your website for the first time. This requires attempting new marketing concepts towards what will capture attention and bring in new users.

chewse website layout interface background images

The startup homepage website for Chewse is small yet reliable. Visitors have access to the footer navigation plus a quick search feature. I would imagine the developers are expecting people to fill out their zip code and gauge the usefulness of this product. It is basically a search engine for picking out catering services, and the big fullscreen imagery illustrates this nicely.

sunrise iphone mobile app interface ui

Now the landing page for Sunrise is totally different, but still incorporating this same technique. Sunrise is a mobile iPhone app used as a mobile calendar system. The homepage is clean and follows a vibrant design matching the application UI. Specifically the large iPhone demo slideshow really stands out to let visitors know what this page is focusing on.

Long-Scrolling Pages

Out of all the recent trends I have been greatly interested in the single-page scrolling sections. This design caters around multiple page sections split up by images, headlines, colors, and textures. Users generally have access to a fixed navigation bar which often scrolls down alongside the page.

assured labor website ui interface layout inspiration

The landing page for Assured Labor is one great example. As you click on any of the top navigation links it will automatically scroll down to that section on the page. You can also find a small vertical list of dots which behave similarly as linked navigation fields. One reason I like this technique is because curious visitors may find all the details they need on a single page.

space monkey landing page design interface scrolling

Now the design for Space Monkey is also just a bit different. After landing on their homepage scroll down a bit and you will see another 2nd fixed navigation bar. This will only display on the homepage so it doesn’t track you around the entire website. But the developers have encapsulated so much information into the layout that it is easier customizing a guided nav menu. The use of icons and diagrams merely adds to this display effect for their product.

Flat UI for Simplicity

Just because many designers are fans of the flat UI does not mean this will work for everybody. However I have yet to find a website layout using flat interface elements which can be seen as ugly or unusable. Most buttons and links will be affected, along with larger block areas of important content.

kaggle startup website layout flat user interface

The reason I use Kaggle as one example is because of their brilliant use of colors. The entire layout is separated into various horizontal blocks of dark grey, light grey, and blue. All of the links and navigation blocks are blended nicely into the color scheme. Designers can take advantage by creating a meshed user interface balancing flat elements with colorful backgrounds.

divshot website ui inspiration layouts flat graphics

Now the website for Divshot is more of a landing page design. Here we can see elements for demonstrating how the product works and outlining the most important features. Using flat buttons and icons will keep all this information within readable context.

It is a big reason that I will advocate flat minimalist UI design. When focusing on simplicity you will generally garner faster and more powerful results. It also allows you to quickly fix what isn’t working and hopefully replace it with something that does work. Pulling in more converting users would be the highest priority goal for a majority of startups.

Targeted Branding

Of course unique branding will play a large part in your startup’s overall success. Why would people come back to your site if they can’t even remember the company name or logo design? Before launching your website online ensure that your brand is memorable and relatable to average users.

adstage io startup website brand inspiring

The example from AdStage uses their logo twice in the header and once again down in the footer. Visitors are sure to remember the website layout regardless of if they can remember what the company does. And thankfully this is all outlined on their homepage, so it should not be a difficult task discerning their goals.

The best methods for coupling your branding is repetition. Although not too many times, or else your design will become monotonous and frankly annoying. But instead use a set of repeating graphics, imagery, icons, and/or logos to instill a continuous force of branding design. As long as your website name is memorable the graphics should quickly tie into the overall brand.

Final Thoughts

Startups are one of the newer business models coming out of the 21st century. We have witnessed the rise of great tech companies and new Internet ideas which almost all started out in the startup phase. I hope these techniques will help developers construct usable landing pages and startup websites. Your design and interface will be a huge selling point for potential users and customers. But if I have overlooked any other useful tips feel free to share with us in the post discussion area.


Advertise here with BSA

November 02 2011

10:00

8 Techniques To Create An Irresistible Landing Page

A landing page is a very important tool for online marketing and is also known as a lead capture page. The definition of it is a single page that appears in response to clicking on an advertisement. These pages are usually designed with a clear scope: to sell or make the user subscribe. They are normally extensions of the advertisement link the user clicks on. You can find links to landing pages in social media, e-mail or search engine marketing campaigns and many other places. You can find them all over the internet. With a clear goal of converting the visitors into buyers or subscribers, the landing pages have to be convincing right from the first moment, otherwise they will not lead to the desired purpose.

1. Embrace or avoid the fold

There are many discussion about the fold on the internet and even if I don’t have a preference, I can see that each one of them has advantages and disadvantages. The fold (the part of the page visible without scrolling down) can be used to your advantage if you manage to make the user scroll down. People say the users do this anyway, but I might not agree. If the things above the fold are not interesting, I will not scroll – why would I, after all?

Although I do not think designers should expect people to scroll, if they have a nice teaser over the fold then they can put much more information about the campaign or product under it. For example, I’ve seen landing pages with illustration above the fold and with the boring and long text under it. The illustration got the user interested and now it is more likely for him to read the information, regardless of how boring it is. This is the way I usually like to advise people to do it.

The others say that animation or illustration should not be above the fold, because it loads slowly and it drives the user away. I consider this totally unfounded and stupid to say. We are all designers here, nobody uploads images of 5MB that load in 1 minute. If we still do that, it means we either do it on purpose or we should find other jobs. This argument is not valid. Moreover, if you manage to attract the interest of the user with the boring text, what good will the illustration under the fold do?

2. You need a clear call to action

The first point we’ve talked about is not the most important – this one is. Having a clear call to action will not distract the user’s attention and he can focus on the purchase (which is exactly what you look for). It is a huge mistake to design a cluttered landing page and not make the call to action clear, because in the end it all comes down to how much you’ve sold. The page has to be simple and explicit for all kinds of users. Bare in mind that not only IT experts and computer geeks visit the ads, so do beginners. The purpose of the website needs to be defined by the user within a matter of seconds.

It is not difficult to focus the call to action, you just need to use some of the following elements:

  • Ask a question
  • Make use of the graphics to direct the user’s eye (no Vegas Lights though, please – gradients or background images work well here).
  • Keep the most important thing on the top of the page
  • There has to be a contrast between the dominant color of the page and the call to action. It needs to stand out.
  • Keep it short – one sentence should be enough; simplify everything as much as possible – you need to sell, not to tell stories.

Groupon has a great landing page which you can see below. If we take a look at the list above, we can see that Groupon used some of the elements I’ve named. They asked a question (which is not really a question, but the user still has to confirm the city), they keep the call to action on top (very close to the Golden Area), there is contrast between the green background and the light call to action box and the text is short (“Save 50% to 90% in Vancouver”). And voila, they have a very useful and productive landing page.

The Landing Page of Groupon

3. Use infographics

It should be clear for everybody out there that long blocks of text will not sell anything. People do not read too much anymore; therefore we have illustrations, animations and sound to replace the old way of doing it. Text does not grab attention, graphic elements do. Therefore you should try to maintain a balance between these two. I know it is difficult because people should be interested in text and what you offer, but they are not; and you are there to make them buy. So design the way they want it!

Text and graphics can easily be combined by a good graphic designer, so if you are not one of them, find one. This concept is called infographics. They are quite easy to notice and usually they get the point across to the viewer quickly. This way you can have both text and graphic in one interactive concept and make them work together.

If you are stubborn and really wish to insert blocks of text, look into a typography manual. Keep the font at a decent size, increase the line height and pick a friendly and easy-to-read font. People are more likely to run away (and they will, trust me) if they see a large block of text. It gives a feeling of the internet back in the 90s, for those who experienced it – you don’t want that on your landing page.

Below you can see two examples of how an infographic works. These two are not landing pages, I just want to show you how easily text and illustration can be combined.

Bankruptcies Infographic

Infographic by Coca Cola

4. No other links

Removing any other link besides the call to action buttons is important, because the last thing you want is to drive the user away to another page. You can have a Privacy Policy link which should open in a separate tab, but don’t include other links. Users get carried away pretty fast. As the experts advise, there are only two options for a user who hits a landing page: signing up or leaving the page.

There are many examples on the internet where landing pages are actually part of the website. In this case you should try to eliminate the navigation as much as possible or at least make everything open in a new tab. The second choice is quite annoying and I wouldn’t go with it. I would rather try to put the navigation somewhere else – or, for better results, I would actually never have a landing page as part of the whole website.

5. Offer something for free

There is nothing wrong with offering something for free in exchange for the e-mail address or whatever it is you are asking for. Most of the time it actually helps. Make sure your landing page specifies that you offer a product, trial or anything else for free. Is there anybody out there that doesn’t like free stuff? Free always works, so why not go for it.

Vinotrac offers access for free

Although free always works, this doesn’t mean you should literally have the word all over the place. Quotes like “No obligation”, “No charge”, “No credit card required”, “No commitment required” and many others work very well too.

6. Where to sign up?

Landing pages are not only made for selling something, but also for convincing users to sign up for future details or updates. But how do you do this?

Well, this might be a difficult one, because you have two options: you can insert a form or make a call to action button which links to a form completion page. Which one should you use? It depends on the type of form you have.

Mail Chimp has a nice call to action button instead of a form to fill in.

If you need only up to four fields to be filled in, then put the form. Otherwise just create a call to action button which will take the user to a separate page where he can fill in a form with more fields. If you choose this, then make the button big and let the user know he goes to a page with a long and boring form to fill. If he gets there, it has to be his choice and he has to know what he should expect.

7. Focus on security too

Don’t leave this behind. Security is one of the biggest issues on the internet right now. Don’t let it be on your website too. Do everything you can to protect your users. Start with having a visible SSL certificate and an HTTPS connection. As said before, a link to Privacy Policy should not be skipped. And there is also a reason that every program you need makes you check a small box before you can continue. Even if you don’t, they want to be sure you’ve read the policy before.

Both Secure (https) and SSL connection are featured here

Most of the users tend to feel more comfortable on any kind of page if they notice these elements, therefore try to have as many as possible. Don’t forget you’re dealing with personal information such as e-mails or phone numbers or, even more, addresses and credit card numbers.

8. Closely follow the progress

There are many tools on the internet which can help you track the progress of your landing pages. The best of them is by far Google Analytics, which gives you an insight to how the users interact with your page. Try to look as much as possible into that and increase the conversion rate of your landing page. At the end of the day it all comes to this.

Conclusion

Having a landing page is something everybody looks into nowadays. They may sell a product, write newsletters, tease people with gossip from the latest technology trends or even spam users, all of them look to have a landing page which collects as much information as possible. Try to follow the tips above and tell us how well they’ve worked for you. If you think we’ve missed something, don’t hesitate to leave us a comment. We would be really glad with some more insights from you.

Read more

101 Landing Page Optimization Tips on Unbounce

Top Landing Page Tips From The Pros on Seldomstatic

Ten Tips For Landing Pages on Lead Generation

Five Landing Page Tips to Boost Your Conversion Rate on Search Engine Land

50+ Examples of Highly Optimized Landing Pages on Smiley Cat

August 22 2011

10:00

Landing Page: Tips, Tools and Inspiring Examples

Landing pages are probably the most underrated type of web page out there but it’s importance is crucial in online marketing. Purpose? Present the customer with a specific and direct promotion or offer in order to achieve a conversion goal (occurs when a customer completes an offer/purpose) of a business campaign.

So why are landing pages underrated? The reason is simple. I don’t want to speculate that most companies don’t give the right importance to their landing pages, but that might be it. Result? A poor, boring and totally wrong landing page design which can’t captivate users. To be honest looking for inspiring and really good examples for this article was the toughest part of my week. I looked at more than 100 landing pages ending up with just 15. You will probably do a quick search and find dozens of templates, so why just 15? First free tip: avoid the use of templates on your own landing pages, I’ve actually found 3 distinct landing page deals with the same layout and that’s not good for a marketing campaign. If a company doesn’t give the right importance to their platform of promotion why would they give it to their product?

The purpose of this article is to give you some insights and help you build a decent landing page. Below I’ve listed some tips plus 15 stunning and hand-picked examples that are currently implemented to inspire your day.

Enjoy it!

Tips

Headline/Call To Action

Similar to any other webpage, the headline and Call To Action are two of the most important elements of your landing page. A clean and simple headline describing what the offer is about is halfway to a possible conversion goal. Your headline and Call To Action need to stand out from the rest of the page, so give it a reasonable white-space (space between elements) balance.

Tip: Don’t write too much because visitors don’t read, they scan and you will probably have 3-4 seconds to tell them what they can get with your offer.

Clients/Testimonials

There are a couple of aspects you should plan carefully when it comes to clients and testimonials. If you have the chance to display a “Clients who use our product” section then do it. Listing brands/logos of your clients will be much more effective than having a statement of your uncle saying that your product is the best in the market. The reason is because visitors will have the chance to spot a brand they recognize which will increase the trustworthy of your landing page. Nevertheless, if you can’t display a list of brands, you should have one or two testimonials but no more than that. Again, visitors have no desire or time to read your customers recommendations. Finally, don’t use pretty photos taken from istockphoto next to testimonials unless you have a real description of the person.

Tip: Display your client brand when possible. If not, show your visitors 1-2 testimonials or even a video.

Color

Color is everything, specially in landing pages. Why? Colors are used to create emotional responses meaning that you can take advantage of a color to make your visitors look at something or make them feel good about an element of your page. Each color has a meaning and Tina Zennand wrote a fantastic article about this subject - Colors in Web Design: Choosing a right combination for your Website

Tip: Use a color that suits your offer and use a different color for your headline/Call-To-Action.

Consistency

One major problem I’m used to see on landing pages is a lack of design and message consistency. If you have more than one page, then every page should follow the same design and structure. Doing the opposite will confuse your visitors and confusion is an exit ticket from your page. However, you will have an even bigger problem by confusing the user with distinct messages. When I click an ad with something like “Get a free invitation – today only” I really don’t expect to see a “Grab an invitation for $10 – this week only” when I reach the landing page offer.

Tip: Keep your landing page trustworthy and avoid confusion.

Avoid design clutter

You have a great headline and Call To Action, you’ve chosen the right color combination, you finally have some consistency but… when visitors reach your landing page they really don’t know where to look because you have text, graphics and photos everywhere. They just leave your page and you lost a sale. The key is to have a clean and simple design, decide your content priorities and make it easy for your visitors to reach their goal.

Tip: White-space is your friend.

A/B Testing tools

A/B Testing is a method with the purpose of testing more than one version of an element. Imagine you have a landing page in dark and bright versions and you are unsure about which one to use. With A/B Testing you will basically determine which version is most successful by splitting your traffic between both versions.

“A/B testing, split testing or bucket testing is a method of marketing testing by which a baseline control sample is compared to a variety of single-variable test samples in order to improve response rates. A classic direct mail tactic, this method has been recently adopted within the interactive space to test tactics such as banner ads, emails and landing pages.”

Let’s take a look at some of the most popular A/B testing tools.

Visual Website Optimizer

Visual Website Optimizer

Visual Website Optimizer is an easy to use A/B testing tool featuring point-and-click test designer and WYSIWYG editor for creating variations. In addition to being dead simple split testing software for marketers, it also dramatically shortens time to go live with your A/B tests because of the innovative “tag-less” integration (not to mention it reduces your dependency on IT and web development department for uploading code snippets again and again).

Optimizely

Optimizely

Simple, fast, and powerful. Optimizely is a dramatically easier way for you to improve your website through A/B testing. Absolutely no coding required. A one time copy-and-paste is all you need to run tests.

Sitespect

Sitespect

SiteSpect provides the world’s only non-intrusive web optimization solution, enabling marketers to perform rapid A/B testing, multivariate testing, targeting and personalization, mobile content optimization as well as web performance optimization across all of your sites and landing pages … all without having to implement page tags or change your site in any way.

Google Website Optimizer

Google Website Optimizer

Website Optimizer is an easy-to-use tool for testing site content that delivers actionable results. Below are just three of the many benefits that testing brings.

Inspiring Examples

Bestviajes Whale Shark

Bestviajes whale shark

StatusBoard

StatusBoard

Amazing Riviera

Amazing Riviera

Ben the Bodyguard

Ben the Bodyguard

Bestviajes

Bestviajes

Dribbblr Ipad App

Dribbblr iPad App

Shallibuy

shallibuy

WeatherWise

Weatherwise

Nexus S

Nexus S

Tea Round

Strawberryj

Strawberryj

Cudo

Deviantart Portfolio

Deviant

Mobilewebbook

Sparrow

Sparrow

June 21 2011

04:12

How to Design and Program a Facebook Landing Page

Advertisement in How to Design and Program a Facebook Landing Page
 in How to Design and Program a Facebook Landing Page  in How to Design and Program a Facebook Landing Page  in How to Design and Program a Facebook Landing Page

We all know that Facebook provides a great opportunity for organizations to connect with their target audience and interact with their clients. To do this more effectively, organizations are creating custom Facebook pages to differentiate themselves and represent their brands on Facebook.

Jgvisual1 in How to Design and Program a Facebook Landing Page

But how does one go about creating one? How exactly should one be designed and what are these iFrames that are used? If you’ve been looking for answers, take a look at this screencast. We’ll be going through an introduction to designing and programming a Facebook landing page using iFrames. Enjoy!

Please feel free to share your comments with us in the comment section below.

(il)(rb)

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl