30 Website Landing Page Designs To Learn FromApril 14, 2016
1. LEESA – No Distraction Design
Born to provide a better sleep experience, Leesa is a mattress design company based in Virginia. Offering free delivery throughout the US and a 100-night return policy, its website does not waste any time of the visitor and communicates only what needs to be told: our product is affordable, and we guarantee it.
Leonardo Da Vinci said, “Simplicity is the ultimate sophistication”, and Leesa makers emphasize on the same. The Leesa website in its first fold offers “call to action” with a charming young woman admiring their product with a smile on her face as the hero image. Having no sliders, shiny blinking signs, or flashy images clearly reflects the belief of the makers in their product. Followed by reasons to buy their product, and design breakdown supplemented with an image that allows you to take a sneak-peek inside the mattress. The flow of content is extremely smooth, and the best part is that there are no hyperlinks that could distract the visitor from learning more about the product below the fold. There is no room for complexity in navigation as they have just one product to offer, in different sizes.
The only two negative things that I noticed are the out of focus favicon and a little wastage of space. Other than that, I loved visiting: https://www.leesa.com; from a user’s perspective.
2. AIRBNB – Standby and be ready to be Awestricken
AIRBNB offers to book unique vacation rental spaces for travelers on behalf of the local hosts in hundreds of cities, around the globe. A visitor cannot miss the hero video playing in a loop teasing him with glances of numerous tourist destinations ranging from most popular ones to rare spots that they might not have even heard about. The hero video hooks you in within seconds, and the visitor is already browsing spaces, owing to the CTA form placed right under, that requires you to fill destination, lodging dates, and the number of guests.
Below the fold is the plethora of suggestions for international vacation destinations to choose from. The website design is capturing and makes you want to go away for the weekend.
Firstly, I did not particularly like the infographic that pops when you click “How it Works” (given below) and feel that there was a scope to do a lot better.
Due to the mp4 hero video, the load time shoots up to 4 seconds with having to load nearly 15 MB. It can really frustrate users with slower connections and might affect bounce rate badly.
It is a stellar design with huge appeal, and visiting: https://www.airbnb.com worked for me and made me consider planning a vacation.
3. Contrastrebellion – Common Mistake Busting Teaser
The idea behind the creation of the website is simple, draw your attention to a common error that highly affects user experience (UX). Its creators Zoltán Gócza and Richard Gazdik are designers and UX experts. Most business owners with a web presence do not know much about UX and possibly do not hear about it until something goes wrong. It is one of the most integral parts of website design process, as usability of the website directly affects performance and overall human interaction.
The website comes upfront with an important, and possibly highly ignored point, “contrast”. The raised clenched fist, a symbol of rebellion, support and solidarity, and in this context clearly represents the school of thought that these designers represent, viz., choosing better contrasting text color. It has been communicated pretty clearly that low contrast might make the website look aesthetically attractive but makes reading the text nothing but an ordeal for the end user.
With screenshot examples of a few websites on the second page with an image slider, the website illustrates how the text on a poor contrasting background makes it difficult to read. The website explains why fairly good looking websites can put their performance in jeopardy, by choosing poorly contrasting colors for text, and background. In its subsequent pages, it also goes to show what industry front-runners, and the guidelines from W3C state the same.
Being a designer myself, I advocate these same principles myself and also suggest the same to my clients. With another image slider that displays example screenshots of websites that use good contrasting colors for text, the website appeals the visitor to share their idea across social media connects. Making a no other call to action except sharing links to the websites, social media details, with a short bio of both designers, the website also reflects their integrity of not using this space for just promotion of their services.
Upon visiting the website: http://contrastrebellion.com, the visitors get to learn about a very real aspect of UX, and its importance in web designing. This would go on to help many businesses rectify the stated issue with their website.
4. Bellroy – Slim-plicity Redefined
With a challenge to make a slimmer wallet that offers a more effective way to carry your cash, cards, and coins, Bellroy strived to help men get rid of that awfully ugly looking out of shape wallets and introduced their first thin wallet one in the year 2010.
From a user’s perspective, having interactive landing pages that take input in the form of gestures for mobile users or from mouse-drags in a desktop environment, are the most remembered ones. By adding an option for visitors to interact on the slim wallet product landing page at http://bellroy.com/slim-your-wallet/ , that helps them see and realize, how the shape of a normal wallet changes upon adding or removing its contents, the designers took this website to a whole another level. The realization of what is wrong with the product you are using is one of the biggest motivation to replace it with a better product, which is exactly what this cash incremental slider is going for.
The construction of the state of the art slim-wallet in the form a cool animation is being showcased below the fold which reminds you of the post-WWI KISS principle, adopted in production in the USA. The business has coined the term SLIM-PLICITY from the words ‘simplicity’ and ‘slim’, owing to salient features of the wallet. Followed by a glance at usability enhancement features of the product using embedded videos, the website highlights how this product can make a user more organized. The whole collection of products is featured in the successive folds with a grand list of footer links at the end.
Except for the excessively large number of footer links, I liked everything about this landing page. These links can be very harmful as the visitor may take a completely unproductive link out of this otherwise highly effective page.
5. Dropbox – Captivating and Pleasing to the Eyes
Ranking among the top-100 most visited websites in the world, anyone who works with off-site clients or team must have heard of, if not used Dropbox. With so many file types, document, videos, presentations, images, etc.., it becomes tiresome to share files with different file extensions through separate channels.
Being website of one of the most easy-to-use product, the simplification of usability is something that just had to be a strong inclination of the vision. The pictorial representation of the features of the product using simple sketches immediately catches your attention. You cannot miss the blue colored ‘Download the app’ CTA button above the fold.
The website represents one of the most efficient tools ever, and possibly it is one of those cases where the product speaks for itself and does not need attractive and grand explanatory videos or infographics. The subtlety of the website in communicating features of the product is exemplary and unequivocal. Visiting: https://www.dropbox.com/ is a pleasant experience as your screen is not bombarded with information that is difficult to grasp or grand banners of product discounts. Being a happy Dropbox user myself, I can add that there is no other easier-to-use tool and no other easier-to-browse website out there.
I loved the absence of slider or any form of animation. I liked the use of very soothing background color from the family of pastel colors with highly contrasting text color. It helps a lot in avoiding distraction and increasing the likeliness of the visitor to read the text.
I have nothing negative to say about this website.
6. Ultravps – Old School Champ
Ultravps is a shared, reseller, virtual private server web hosting provider based in Germany. With a three image slider highlighting benefits of availing their services, you can’t miss but notice that its design is quite different from the ones you have seen so far. The categorical difference is that this is a primitive design and not exactly meant to serve mobile users since it is from an era when mobile browsing was quite basic. Website design was primarily focused for desktop and laptop users since handheld devices were very less, or I should say, insignificant. Hence, unlike other websites we have seen so far, this one was not designed keeping mobile usage in mind.
It is a quite old school and it is refreshing to look at such a website in current scenario as most businesses have adapted to make their websites compatible with handheld devices. Since the information on the website is more or less limited to displaying the plans for web hosting that it offers, it gets to pull off this primitive design. The plans are displayed on the right and also display the per month cost associated with each one. With a short introduction of the founders, it displays testimonials from satisfied clients, and the guarantees offered, that are common among all plans.
You are bound to feel nostalgic as such websites are not encountered much these days as Google and other search engines give more value to mobile-ready and responsive designs. Having a static non-fixed header, with page length not even long enough as to require a visitor to scroll, it looks unique and practical as it displays all what a visitor might be looking for. So, even though the design of the website: http://www.ultravps.eu/ does not comply with the current trend, yet it serves the purpose.
The main issue is that it would not be awarded higher SERPs and might look unattractive in comparison to the websites developed in the last couple of years. Also, the appearance of the website and interaction can be highly unsatisfying because visitor might end up zooming-in or out repeatedly to understand the text.
7. Mailchimp – Reach Your Target Market with a Better Email
For the most internet marketer, Mailchimp is synonymous with email marketing. With plans and features suiting a variety of businesses ranging from start-up to industry frontrunners, it is undisputedly the best email marketing platform.
The website opens with a simple tagline accompanies with a hero image containing the screenshot of the product, and the usual workstation embellishments, viz., a pile of books, pencils, a plant, a photo-frame, and a coffee cup. With a simple CTA in the fixed header and another one under the hero image, to sign up, the website is consistent with the Calls to action on this page.
My favorite thing about the design is its straightforwardness and tidiness. The page does not have a plethora of links or topics and concentrates only on one track CTA. The website is made without any clutter or useless elements that could potentially distract the visitor. With this subtle design, you can assure smooth browsing experience and call to action button that appears inviting.
Being a user myself, I have not, even in my wildest dreams thought about using another platform for email marketing. I loved the color contrast between the background and the text that makes it quite easy to read.
8. Nest – Product Focussed Design
Based in Palo Alto, California, Nest is a committed to making homes smarter and thoughtful with use of its state-of-the-art products, and its integration with other compatible third-party products. The motivation behind the development of these home safety and security products is the need for such products in almost every household, including those of the founders of Nest. Since the development of the first prototype of Nest Thermostat in December 2010, the company has introduced several practical products and even upgraded them to enhance its usability and functionality.
The website opens with their flagship 3rd Generation learning Thermostat with a link to a product video and a matching appropriately sized CTA button to buy it. The website design here completely favors their top-selling product and gives buying option to the visitor right away. The word “learning” in the product name intrigued me and I could not help but watch the video. Besides the website designers, the product developers also seem to have a huge understanding of customer behavior and color psychology.
Below the fold are the other two products with links to their respective product pages. This goes to show how they feel the need to maintain a categorical difference in the importance they want to give to other products. Also, if you give the same type of listing to all products, it would look repetitive and mundane.
The website is very lively and youthful owing to the use of bright colors used in the product design itself and also the background of images that are showcasing products. But to keep things from getting too bright and saturated, consistent use of pastel colors as background can be seen. The successive fold just features recent blog posts, two at a time in a manually scrolling image slider.
Visiting https://nest.com/ was a delightful experience as I not only feel the need to buy one of the products but genuinely want to praise their website designers.
9. STRIPE – As Sleek as it Gets
Stripe provides solutions for mobile apps and websites to accept payments from clients and customers and make payments to contractors and vendors around the globe. With its payment seamless integrations, Stripe has a presence in two dozen countries around the world.
The first thing you see when you visit the website is an introduction to their new application program interface (API) ATLAS as the hero image. It has two “call to action” buttons, one to discover the new API which takes you to the Atlas product page, and the second one to request an access which allows you to sign up for a beta version.
Upon scrolling, all you can see under the fold is the little informative links and names of their leading clients, followed by the footer. The second fold is all there is and one cannot scroll further down, all confused and weirded out, I decided to go above the fold again to realize that the Hero image also has a manual slider, with one slide for each of their product. I found this a little odd as the slider should not have been manual but auto-scrolling. But I figured that designers might have probably disabled auto-scroll in order to give importance to the new product ATLAS and serve visitors on that as the face of the website.
The top navigation is very concise and standard. Although the website is very sleek and pretty, it fails to show a visitor all it has got, until they choose to scroll the hero image manually. I loved the use of muted tone colors and the use of world map as a background for the hero image. I have mixed feelings for this website: https://stripe.com/ ; which goes to show shortcomings and room for improvement.
10. Firewatchgame – Reminds me of 3D Pop Up Greeting Cards
A first-person game set in Wyoming, USA developed by Campo Santo with an adventure-themed, in the year 1989 setting where you, the player is a fire lookout whose job is to spot smoke and try to save the woods from a fire. All the human interaction you have is with only Delilah, your female supervisor via handheld radio.
The website has a humongous animated hero image showing Henry, the player character on top of a rocky hill, doing his lookout job with a sunset or sunrise in the hills in the background. The hero image seems to be taken from a high angle above the fold but takes you to an eye-level shot upon scrolling. It reminded me of greeting cards we used to exchange, back in the day with a huge flower or castle of some sort in a 3D-cut paper that pops up upon opening the card. I personally loved the vision, as it seems to have been taken from gameplay and the scarcity of life makes you sense troubles that you may encounter playing the Firewatch game.
If you are a video game enthusiast, you would not be able to resist this one, if you have not caved in yet, visit: http://www.firewatchgame.com/ to watch the trailer. Further scrolling down takes you to about one minute of gameplay trailer, which is a YouTube embedded video. Henry finds out that someone else is in his tower whilst he is out. This simple message from Delilah is a stunner of a teaser.
Upon further scrolling show links to Merchandise, Screens & Trailers and FAQ. These links are placed quite strategically and in accordance with the overall theme of the website. It is followed by one-liner review from the Entertainment Weekly, and links to Tech Support, and Streaming & Lets Play. The footer contains the logo of the game design studio, Campo Santo, and PANIC.
The use of earth tone colors looks breath-taking, even though it was quite expected owing to the fact that gameplay takes place in the natural outdoors. I am going to download it this weekend and see how it goes.
11. Getmagicnow – It Can’t Get Simpler than This!
Located in San Francisco, CA, Get Magic now is your go-to guy for just about everything and works like magic. To break down what “everything” means here, you book your flight ticket, order food, send flowers to your loved ones, order grocery, and more from other third-party providers. Well the beauty of it is that you do not have to visit a bunch of websites, all you need is to text them what you want, and they would make it happen, I repeat, Just like Magic!!
The website literally is all text except for example screenshots that explain four request instances. The website clearly explains how the assistance is provided and also covers the frequently asked questions. Text Magic now to get started: 83489.
Featuring negligible imagery, this super clean and minimal designs with a good touch of typography is an example of how a website can be built without any advanced tools, multiple embedded elements, complex structures, glittery discounts, and flashy sliders. After all, a website is not something to show off how attractive of a website you can make but how informative it is to prove the featured products or services useful to the visitor.
The only drawback of this design is that it might come across as boring for visitors. As far as CTAs and usability are concerned, this website covers it all. Visiting the website: Getmagicnowhttps://getmagicnow.com/ was a relaxing experience as the website quite different from the current trend. It reminds me of the editorial column of the newspaper which can be boring for many but most interesting owing to the knowledge it offers.
12. Qardio – Prioritizing Flagship Product
Founded in 2012 by Marco Peluso and Rosario Iannella with a vision to seek solutions that could benefit healthcare industry with innovation, Qardio has introduced award-winning affordable products with unparalleled user experience and efficiency. With a power to transform personal healthcare for millions around the world, monitoring your health is an effortless task, using Qardio products.
The website opens with a Hero image of the product QARDIOARM, which is a smart portable blood pressure monitor. The second hero slider is for QARDIOBASE, a smart scale, and body analyzer, and finally, the third one is a wireless EKG and ECG monitor, QARDIOCORE that also shows heart rate, body temperature, and more. Right underneath the slider, all three products with images, and a one-liner have “Learn More” buttons beneath them, followed by reviews by three leading magazines. This also goes to show the excellence of these products. The use of black text on the white background of these “Learn More” goes well with the design but I feel the CTAs require a little attention, and should ideally be in green.
The images being used have a pretty mute toned colors and look very sleek and elegant. A good design needs to be backed with great photography and intriguing text content for presenting the products or services being offered well, and the website: https://www.getqardio.com has it all. In the end, these award-winning products are also available at leading retailers like Apple store, Target, Amazon, and more.
QardioArm is a product that I would really want to purchase as my mom is a frequent flier and needs a portable solution that is smart as consumes less space. The added advantage is the smartphone integration, which can be really helpful in maintaining logs, effortlessly.
13. Telegram – A new era of messaging
Having a native app for all platforms, Telegram is an instant messaging (IM) service with over 100 million active users. It allows users to send and receive any type of file including stickers, videos, and photographs. Popular for its group chats, this cloud-based service also provides an option to chat secretly by sending encrypted messages with self-destruct timers.
The website opens in a rather humble way with a simple top navigation header on the left and a link to twitter handle of Telegram on the right. The center exhibits sophistication with the text: “Telegram a new era of messaging” right under the round brand logo featuring a white paper plane flying in the blue background. Three latest posts from the on-site blog are also displayed towards the right, under the heading “Recent News”.
This is followed by five images of in-use screens of Telegram on different platforms and devices namely: Android, iOS, Windows Phone, on a laptop with web version in a browser, and finally an app for PC, Mac, and Linux with links to their respective app download pages.
So far the website is low on graphics and images and comes across as a very plain website, and gives an impression that even rest of it would be text-based, whereas, things get interesting from the moment you scroll under the fold to learn what you can do with Telegram. Just using nine thumbnail size images featuring animated characters, its top uses have been explained. I personally liked the use of the 19-century top hat and monocle by almost all characters, as it related to the era when rapid expansion of the use of the telegraphs was observed.
Upon further scrolling, nine reasons for switching to Telegram are given in the same fashion using nine images, with animated characters. The footer of the website is also pretty straightforward and looks pleasant. Use of animated characters is the highlight of this website to communicate features and option of the app. The choice of muted colors helps in keeping the website: https://telegram.org/ subtle and delightful to look at. I would love to use the app as soon as I get delivery of my new Android phone that I ordered last night.
14. Evernote – Kudos for Upfront Call to Action
Headquartered in Redwood City, CA, Evernote is an app development company that aims to help users organize their personal and professional tasks better to ultimately become more efficient and not forget to do tasks. The app enables users to create notes in the form of handwriting, text, images, a sketch, and more from almost all platforms and devices.
The looping hero video shows users working on computers, which relates to almost everyone. It speaks volumes in terms of smartness in identifying and getting the attention of one’s target audience. With a very impressive and catchy phrase that you instantly feel connected to, the website throws the call to action towards the users right on top of the hero video. Just about everyone who works in teams with computers in an office environment would know about Evernote, and this upfront call to action saves the time for all those who are well aware and have visited to try it. So basically, without even scrolling down, many users would sign up owing to the popularity of Evernote.
Under the fold, the features of the app have been explained in a very uncomplicated and sharp manner with the use of images of in-use screens. Just after explaining the top four features, the website again displays you the same call to action, for signing up but with a unique appeal, and different phrase. With the only footer to be displayed beyond it, website closes with a very likable finesse.
Upon visiting the website: https://evernote.com/, I fell in loved the design and the layout for its simplicity with ingenuity. I personally love the Evernote logo, which is a gray colored sketch of an elephant’s head in close-up profile, possibly due to my love for animals. I have no doubts about how Evernote can be highly convenient and helpful, and the website signifies the same in a penetrative way.
15. Hipchat – Making Upfront CTA with Subtlety
Founded by the trio Chris Rivers, Garret Heaton and Pete Curley, and later acquired by Atlassian in 2012, HipChat is an instant messaging web service for enterprises and teams, privately. With integration available with over 100 tools including Atlassian’s own GitHub, MailChimp, and Heroku, HipChat can be used on Android, iOS, Linux, Windows, and Mac platforms.
With a cool hero image with a team posed with a robot clearly signifies the use of technology for the betterment of the businesses, we work for. I love how CTA has been placed on the hero image itself, even before explaining what the users would get, same as in the case of the Evernote website. Hipchat as a service is so popular that most users might not need to know more about it. The usage of CTA button with a green background and white text color stands out well against the white from the hero image.
It is well established under the fold that the service is developed for businesses, and for internal team discussion in addition to intra-team interactions. A befitting screenshot explains a lot. Further scrolling elaborates on the compatibility of the app to run across all major platforms and devices. It also ends with a link to the download app page with anchor text “learn more”, which I personally do not prefer. I believe in having links with highly relevant anchor texts over generic ones.
With a map in the background and users in different locations on it, reflects that with Hipchat, the dependency of physically being present at the same location for meetings or interactions has been removed. In addition to just writing to explain the same, the extra effort made towards painting a picture of a scenario with members of different physical locations really helps in explaining the idea being represented. Upon further scrolling, integration possibilities of the app have been displayed, what is missing is probably the fact that some of the mentioned integrations may be paid. Showing transparency in mentioning that it is not a free program completely, but a freemium could have helped a lot here.
The option of deploying Hipchat on the business’s own server is displayed on scrolling further down and top nine features have been recapped. With mentions of the customer base with names like Expedia, Intuit, Intridea, and Squarespace must impress the visitors. The placement of another CTA right under testimonial and customer base is very smart, and also comes across as a great way to end the landing page. The footer is again straightforward with basic links, and their links to various social media pages.
Visiting the website: https://www.hipchat.com/ was a good experience and yet another example of a landing page that is highly efficient without the addition of anything over the top fancy. The subtlety of the website is what makes it look great.
16. Berkshirehathaway – Sticking to the Basics
Having its main landing page, the whole website for that matter, entirely text-based, Berkshirehathaway, headquartered in Omaha, Nebraska under the control and leadership of Warren E. Buffett. With a huge list of assets owned in a diverse range of businesses including and not limited to construction, insurance, apparel, food, furniture, logistics, aerospace and defense, and more, Berkshire Hathaway is one of the ten largest public companies in the world.
I was surprised to see an entirely text-based homepage for such a huge company, but when you have over $500 billion worth of assets, over $200 billion revenue, and ‘Sage of Omaha’, Warren Buffett as your CEO, things are bound to be unconventional. In an era of highly graphic indulged websites with the use of multiple colors, sliders, pop-ups, banners, etc.., it is a delight to visit a website like http://www.berkshirehathaway.com/.
The website has a header with the company’s name and address in the text. It is followed by 15 links to various informative links for customers and investor’s interest. Under these links, the website promotes GEICO car insurance, a Berkshire Hathaway subsidiary, along with a link to its website. The website ends without a footer, just with a link to the legal disclaimer, and an email address for visitors to send their queries to.
The website is designed in basic HTML, and the generous white space and good contrasting text color make it easy to read. It is so simple to create such a website that anyone after two classes of HTML can build it. I feel delighted to know that in 2016, still, such a website exists where you do not have to scroll at all.
17. Distrokid – CTA Cannot Get Any Bigger Than This
DistroKid distribution service that releases music of independent artists on online stores like Amazon, iTunes, Spotify, Google Play, YouTube, Tidal, and more. The content gets published under your own label and name within a matter of hours, and the 100% royalty goes to the artist.
The hero image shows the screen of iTunes on an iPhone and a laptop since the USP of this website is for it to publish your work to iTunes and other stores within hours. The background is blue, and text color is white. There is no call to action above the fold, but a Sign In option for returning visitors.
Upon scrolling, on your right, you can see the benefits and features of releasing music on online stores using DistroKid. Under the fold, the background color is white and the text is in a dark shade of grey. The contrast is great and helps in easily reading the text. On your left, call to action exists that appeals artists to sign up for the service with an email and choosing a password. The text-boxes and the SIGN-UP button in blue with white text are pretty wide, a little less than 500px. You cannot miss the CTA on the screen owing to its large size.
On the next page under the scroll, FAQs on the left and testimonials on the right have been given in same, gray text on a background of a very light shade of gray. Here the contrast is not as good, and some may have found it difficult to read the text, had it been a little smaller in size. I can clearly sense that mobile users may face difficulty in reading the FAQs and testimonials.
The website: https://distrokid.com/ concludes with a link to the Twitter page along with Facebook Like page widget on the left and a link to the support center. The website could have featured some vibrancy since its target audience is independent artists, bands, and DJs.
18. Terraform – Brilliant, Impressive and Inspiring Design
Developed by HashiCorp based in San Francisco Terraform, a SAAS, builds, changes, and versions infrastructure safely and efficiently using configuration files. High-level components such as DNS entries, SaaS features, and more can be managed by infrastructure Terraform in addition to the low-level components like computing instances, storage, and networking.
In the content below the fold the benefits of using Terraform, and configuration files have been stated in the very impressive way with the generous use of different shades of blue and purple to match the hero image above the fold. Upon further scrolling, sample configurations for exhibiting the creation of layered resources and infrastructure, and quicker and more interactive integrations have been displayed with a black background using contrasting white, red, green, purple, and blue colored text.
At this time, after having scrolled down five pages, I noticed that there was no call to action so far, and there it was, a huge “TRY TERRAFORM” button, on the very next page. The website has been designed very brilliantly with use of multiple colors in such a way that they do not undermine one another, and also maintain a good amount of contrast for mobile readers to read the text clearly.
Visiting the website: https://www.terraform.io/ was a very exhilarating experience as the website impressed me a lot, and I am also inspired by the design.
19. Letterlist – Simplistic Yet Intriguing Design
A better way to discover fresh newsletters that you can choose, based on your interests. You would be notified with suggestions to subscribe to various newsletters upon signing up with Letterlist.
So, the website is a bit of an enigma as you just see their logo, followed by the text: “The Simplest Way To Discover Amazing Newsletters.”; followed by “for”… the text after which is animated to keep being omitted and typed to be replaced time and again in a loop. Well not that the website fails to intrigue you so far, you still feel the hesitation to hit that oval-shaped “Discover Newsletters” button with a blue background color and white text color.
Basically, the developers chose to give nothing to the visitor until he/she hits the CTA. The teaser strategy might work with many looking for tips, ideas, and fresh content on topics of their interest, but I felt quite skeptical about hitting the CTA.
Visiting the website: http://letterlist.com/ was a very odd experience for me as the design does intrigue me but I hate the idea of not giving out any sample, example, how it works, what exactly is being offered on the landing page. Overall I loved the simplistic design with a text-only approach, which helps the website to be served very quickly to visitors with slower internet connections.
20. Getpatchmania – Fun for All!
Patchmania is a garden puzzle game that has been developed in two years by Little Details, the makers of the popular flight tracker app Just Landed. Developed exclusively for iOS platform, it is available on iTunes app store.
The website features a huge hero image with grasslands in the background with two hills on which farming is being done, the blue sky has a couple of clouds that are moving from left of the screen to the right. In the foreground, on the left, there is a handheld device which has a play button on it, which upon clicking plays the game trailer video. On the right of the hero image in the foreground is the PATCHMANIA logo followed by the CTA button in a black background with white text to download the game from the apple app store. As mentioned before, I like the websites that give out Call to action in the first fold because it promotes straightforwardness.
Under the fold, on the right, there is a barn, in front of which chicken are feeding. On the left, further details about the game are given in white text on the light green grass on the left of background, keeping the theme of the website. Upon further scrolling, you would find screenshots of the gameplay and wallpapers that tilt upon hovering. This adds charm to the website as it was pretty basic in terms of functionality, so far. The website ends with a nice horizontal one line footer that contains basic navigation links and links to Facebook and Twitter page of Patchmania.
I liked the website, and specifically its logo in which the character ‘I’ in PATCHMANIA is replaced by an orange carrot. Visiting the website: http://getpatchmania.com/ was a fun experience, I would have loved to try it if I had an apple device. I also liked the idea of including a story into the game where the player, the bunny named Calvin is taking revenge by eating up the crops of the farmer, Lester, who destroyed his forest land.
21. Kaleidoscopeapp – Saying and Showing it all
Keeping it simple and pleasantly colorful, Kaleidoscope conveys their point concisely and precisely. The choice of colors, with a lot of variations from the blue spectrum, gives it an exciting and an involving look.
The segregation of the website into multiple parts makes it easy for the viewer to find information based on the subsections easily. A clever classification of their features involves witty wordplay to keep in sync with the original name of the site. The website is segregated into Text scope, Image scope, folder scope, and workflow. The information in these subsections is conveyed with lively looking texts with multiple colors. Kaleidoscope substantiate the features of their software package by graphically depicting how exactly their tools work. A side by side comparison of the various features of their tool shall ensure that any preliminary questions any potential customer may have are instantly answered. This approach to staying to the point is made easy for the viewer to understand with finely highlighted points and systematically placed texts.
The pictorial depiction of information on the website makes for a very informative read. At the same time, many would find the website to be too cluttered. Whilst it is opinion based criteria, whoever visits the website: http://www.kaleidoscopeapp.com might have a different opinion about it. As far as design is concerned, it is quite effective. One thing that I specifically liked about the design is the go-to top buttons on the right-hand side of each fold at the bottom. This would save time for anyone who needs to go back to the top after seeing a particular page under the fold.
22. Paste.click – Yet Another Brilliant Text-Only Website
As established before, it is not mandatory for all websites to look and interact the same way, or as dictated by the current trends. The websites that you come across on a daily basis these days are usually responsive, vertical scroll dependent, have a slider above the fold. Although all those websites are effectively able to adapt to the current trend, many tend to lose on the grounds of originality and uniqueness.
As soon as you lay your eyes on PASTE.CLICK, you feel you’re looking at a computer from the 80’s. It has a grey-black background will text predominantly in white with the usage of pink and purple for highlighting purpose. The biggest positive side of this website is that it is very light, hence fast to load even for users with slower connections. The second USP is that the website offers great contrast, which makes the text easily readable.
Visiting the website: http://www.paste.click/ was a very interesting experience, owing to its uniqueness.
23. Kissmetrics – It is Raining CTAs
In a world where we had no option but to rely on whatever information was provided by the giant Google, KISSmeterics came with almost unbelievable information about visitors of a website. I can hardly believe we survived in this harsh and competitive industry without KISSmeterics. Founded in 2008, to bring about a change in how we perceive visitor flow to improve conversion optimization, it has a huge customer base today.
The website opens with a blurred hero image of a work desk with KISSmeterics open on a laptop with a very strong appeal and an unmissable call to action. The added beauty is the fixed header that also contains a call to action, which will be available to the visitor. Above the fold, the chances of a visitors clicking CTAs have been kept very high.
Under the fold, is yet another prominent call to action button right under benefits of KISSmeterics, and upon further scrolling, you would find the display of change that their customers saw. Having customers like Lucidchart, Mention, and Appaloosa does speak highly about the power of KISSmeterics. The testimonial from the VP of Marketing at Lucidchart speaks volumes about its greatness. Upon further scrolling, another CTA is there to try KISSmeterics.
The footer is rather simple, another CTA to subscribe exists on the right, next to the footer. The website: https://www.kissmetrics.com has too many CTAs, which might come across as somewhat pushy to some, I feel it is practical.
24. Heroku – Simply Loved It!
A San Francisco, CA-based PaaS (Platform as a service) was developed in 2007 to supports multiple programming languages, Heroku was probably one of the first cloud platforms. Later acquired by Salesforce, the emphasis was to include more languages so the users can directly start creating apps, rather than spending time and resources to build infrastructure for it.
Since Heroku stands for simplicity, and against complexity, the website reflects the same. It opens with five sliding hero images, each with a pictorial representation of how the platform can help your business. Each of these sliders has a Call to action button under an impressive and appealing message. Under almost all CTA is a link that allows the visitor to explore the customers of Heroku, which I think is a smart move, since the list includes Macy’s, Toyota, Citrix, and more.
Set on a white background, and using a shade of blue that is close to purple, there is a great amount of contrast, allowing users to read easily. Under the slider, supported languages are mentioned for visitors to imagine the flexibility that they would be able to enjoy with Heroku.
The blue used above the fold as text color has been used as background under the fold. With the use of a flowchart-like representation, it has been explained that with the platform, one can start building apps already, instead of working to build infrastructure for it. This is followed by a video box which one can switch to one of the six supported languages, that displays the ease of working using the Heroku platform. The next fold again goes to sport a white background and blue text color, that features a video of one of their customers, LendUp who are talking about the ease they enjoyed while using the platform to create a financial product app. This video is followed by another slider with testimonials from more happy customers with a button to explore more customers.
The website: https://www.heroku.com/ has been built with utter simplicity and comes across as a very pleasant experience and learning more about the platform instantly comes to mind of every developer or enterprise head upon visiting it. I must say that there is a lot to learn from this website, and you might find more than what I have mentioned upon your own visit.
25. Vwo – Making it More Scientific
Visual Website Optimizer is an A/B testing tool for marketing professionals to analyze the website to get alternative versions that can potentially perform better. Based in New Delhi, India, Wingify developed VWO to help online marketing professionals to make their websites perform better.
The website opens with no hero image but a simple sales pitch in white text on a background of blue followed by a CTA button with an orange background and white text color. Above the fold, there is no attraction except for the CTA for trying the tool for free. This helps in drawing all the attention of the visitor towards the button that stands out due to the usage of contrasting colors.
Upon scrolling, a YouTube embedded video shows how you can test and track user behavior to understand what works better, based on which big to small changes can be made to improve the performance of your website. Improving the conversions is the most important aspect of a website, which the tool VWO works to enhance.
On the next fold, the background color is changed to a very light shade of pale blue and grey is used as the text color to show how the tool works. It has been displayed that optimizing the design can bring more conversion, and with A/B testing, you can choose the design that performs better. The successive fold shows the tools and features of VWO, and also explain what it is all about. Their customer base includes Hyundai, Microsoft, Disney, and the positive change they observed upon using VWO has been showcased in the next fold, along with testimonials, and some more brand names that trust them.
The website closes with a huge footer with links to all the resources and guides besides the products. The website: https://vwo.com/ is made exclusively for the tool and saying anything negative but against the large footer is impossible. The website has been designed very scientifically, possibly the use of the tool for the optimization of this website would have been made.
26. Land-book – Gallery of Landing Pages, What Are We Doing?
Land-Book is just a gallery of product landing pages, showing 10 landing pages at a time. The purpose possibly is to display landing pages that they think are good, popular, and effective, well no information is given on the website to support my claim. The website has a very straightforward design, similar to a brochure, or like that of a typical image gallery.
Every time you visit the website, you would be able to see different landing pages being displayed on this website. Not limited to the homepage of the website, but other landing pages have also been featured. Other than liking one of the landing pages via embedded Facebook or tweeting about it on twitter, there is nothing that a visitor can do. The website is good for web designers who need inspiration or need a space where they can explore many designs.
I have mixed feelings about visiting the website: http://land-book.com/ as the website does not really say anything about the landing pages that have been featured, and neither allows visitors to comment. If a visitor intends to comment, he has to do it on a social media platform instead.
Also, the RESOURCES button on top-right corner returns a 404, which I feel is rather odd.
27. Panic – App Development Arcade
Based in Portland OR, Panic is an app development company that develops apps for iOS and Mac OS.
The website opens with their logo in the center on a background of a very light shade of pale blue color. The text color is grey, in which what PANIC does has been stated. Seven apps designed by PANIC have been given in icon form, as they would probably look like, had you installed these on your iPhone or iPad. These icons are also hyperlinked to their respective download pages, feature pages, or dedicated websites. Upon scrolling, you can see a link to their blog followed by a triangle-pattern.
Upon further scrolling, the background of the page turns to dark grey, and the color of the text to light grey and white. The icons are aligned fairly well in a grid fashion, for the easy grasp of information. Visiting the website: http://www.panic.com/ was good but not so interesting experience.
28. NiroFashion – Impresses Again and Again…
Based in Peterborough, Cambridgeshire in the UK, Niro Fashion is a physical fashion store since 1986 and is quite popular among the young and elderly alike. Besides showcasing some of the leading fashion brands like Armani, Hugo Boss, RMC, Versace, and Sugarcane, they are also popular for its bespoke tailoring services.
The website opens with a huge hero image of a young man wearing top-end designer attire and carrying a backpack, who seems to be exploring, on the left. And towards the right, is a boy, using his cell phone and sporting denim shirt, bag and cap along with a cool pair of embroidered jeans. The image takes you to that dream you had about exploring, and trying your hand at adventure. The whole image is a CTA, taking the visitor to the respective brand page to browse all that it offers.
The header contains drop-down menus that you would instantly fall in love with. Kudos to the designers for keeping it classy.
Upon scrolling, you would find four other brands and collection in similar fashion with images used as a call to action button and with a scroll down fixed footer that will take the visitor to the bottom of the page. Upon further scrolling, three of their popular brands have been showcased with a very cool and elegant diamond shaped box, and all the three again, are hyperlinked to their respective brand pages.
Just above the footer, you would find a link to locate their physical store, upcoming collection, and their Fashion blog that horizontally feature as images that are quite tempting. Followed by a brief introduction about the fashion store, the website jumps into a very neatly done footer on the left with important links, and a CTA to sign up for their newsletter. At the bottom are the links to their social media pages, followed by their complete physical address, and a wide grey band with a link that can take you to the top, and save you from repeated scrolling.
I loved the design of the website: https://www.nirofashion.com/ at the first glace, as you do not really see websites, especially fashion stores without a little too much of “SALE”, “Buy Now”, etc.., in bright colors. The website maintains an even tone and usage of only the color grey, which is very soothing to the eyes.
29. Yathletics – Why Write When Video Says it All?
Getting increasingly popular after their Kickstarter project with odorless t-shirts and socks, made with SilverAir technology, Yathletics owes its success to their odorless technology besides simple design and emphasis on breathability and comfort.
The website opens with a short looped hero video featuring an athletic man running and skipping in a t-shirt, a pair of shorts, and trainers with crew-length socks. Incorporating the two products offered by Yathletics, in the hero video was quite naturally done, the video looks great, and so does the model. Also, I really like the crystal clear and descriptive appeal of the hero video.
If you do not feel satisfied with the short hero video, click on the play button to watch the full VIMEO embedded video. I would like to add that I personally loved the logo of the brand due to its simplicity, and it looks great on the left, in the header. On the right side of the header are the two links one for each category of products offered on the website, shirts, and socks.
Under the fold is an array of product options to choose from, broken up very well horizontally, providing all the options in such a small space in pictorial form followed by product showcasing in image form. Footer of the website follows after the presentation of the products. The footer contains a CTA on the left to share your email for the brand to keep you updated with their latest innovations and products, and then providing their email for visitors to send their queries. Towards the right are the links to the social platforms followed by some essential links.
Visiting the website: https://www.yathletics.com/ was a great experience not only because of the use of a cool video for her video but the uncomplicated way in which website has been designed. The effortlessness in the way the products are featured on the website, show how confident the brand is about its products. I would really like to commend the efforts made towards making athletes, or anyone who is training odorless.
30. Snapchat – Ended Surprisingly Early
Launched with a different name “Picaboo” for iOS-only in July 2011, and launched again with the name Snapchat two month later, this image messaging app was developed by three Stanford University students.
The website opens with a huge yellow background and the white iconic ‘Ghostface Chillah’ figure with a black outline as the hero image, which allows you to download snap chat upon clicking. The header features a hyperlink to the on-demand geo filter page.
Well, I was surprised upon scrolling, and I think anyone will, as the website is finished and you can see footer already. The footer consists of some important links such as download, advertising, and legal information, etc…
Visiting the website: https://www.snapchat.com/ was quite a surprise for me as mentioned above, it has no content on the homepage to display its features, benefits, and other information.Request a Project Quote