Page4_1. Designing Landing Pages That Work. By Karol K Having knowledge on how to create an effective landing page can increase the number of site visitors that take the desired action of the web page. Lets discuss factors and considerations that can lead to a better landing page design. What is a Landing Page? Before we begin our discussion, it’s worth quickly defining what a landing page is. From a web development/technical standpoint: A landing page consists of the same basic elements as any other web page (HTML, CSS, content copy, images, videos, etc.)From a business standpoint: It’s a web page that asks users to perform a specific task such as purchasing something or subscribing to an email mailing list.From a user standpoint: It’s a page they see after clicking on a hyperlink on another site (Google searches, a URL contained in a tweet, banner ad, etc).
Three popular reasons for creating a landing page are: Guidelines to an Effective Landing Page Design Call to Action Tips: Be clear. Headline Keep your headline short and direct. Why Your Qualified Leads Refuse to Sign Up: The UX of Plans and Pricing. Every SaaS application has a funnel. Landing page, maybe a demo or pricing page, and then sign up. Qualified leads will stop by your “Plans and Pricing” page to make an informed decision. If you owned a car dealership, would you fill your showroom with stray dogs and blasting loud music?
Well, too many startup founders, product managers, and user experience designers are letting the dogs and loud music run wild. Your landing page and “Plans and Pricing” are your showroom. So let’s make it shine. Talk with your prospect. Plenty of SaaS applications have either “Plans” or “Pricing” links throughout their site navigation. Based on reviewing a range of SaaS providers, following a certain set of common best practices around language often leads to positive customer affinity and more likely action. Let’s look at some actual SaaS providers to see these user experience practices at work. Box Take Box for example. The Box main navigation bar: notice what to bold for emphasis and consistency Shopify. CSS3 Card Trick: A Fun CSS3 Experiment. This tutorial is based on a simple animated experiment that showcases just one of the amazing things you can create using CSS.
I’ve used no images and no scripting; everything’s done using HTML and CSS. It goes without saying that since CSS3 is still not supported by all browsers, it might not work as intended; but I’ve coded this in such a way that it will degrade gracefully on non-CSS3 browsers, including IE (of course). Experimenting on cutting-edge standards for the sake of innovation is an attribute that helps us learn, and perhaps by pushing the boundaries, we can improve our knowledge further. Final Result You can click on the preview image to see the demo. View Demo Download Source A Primer on Innovation If you ask any self-taught professional, motivation and willingness to experiment are the two primary skills that feed their passion to becoming better designers and developers. Fragments and Fieldsets In the code block, you will find: <! Unicode Characters for the Card Suits IE Support.
Early Quora Design Notes - The Artypapers Weblog - Artypapers. January 21st, 2010 Recently the startup I've been working at for 6 or so months launched its first product. Quora is a continually improving collection of questions and answers -- a place where you can find the best source for a wide range of information online; from local hotspots to esoteric Harry Potter trivia, it's all there. A lot of thought went into the Quora product design and even at this early stage many details have been revisited multiple times. So, I thought I'd share a few of the decisions and principles that went into the first major version of the beta product. Key Product Design Decisions Really early on I decided to focus only on the product design and would forgo any time spent on things like visual design and, to some extent, branding.
I didn't really know how that would play out at the time but I knew I wanted to get as much built as possible and as quickly as possible and hoped this artificial constraint would pay other, as yet unknown dividends. Old Quora Header. Lock Down a Paid Subscriber On Visit #1 | DollarShaveClub's Mancave UX Clubhouse) Lock Down a Paid Subscriber On Visit #1 | DollarShaveClub’s Mancave UX Clubhouse Like millions of other people this week, I found out about DollarShaveClub through its undeniably hilarious viral intro video, “Our Blades Are F****** Great”.
I will leave it to someone else to pick apart how incredibly brilliant the video itself is (insofar as any form of advertising can be considered “brilliant”). But here’s what gets me: I signed up for a paid subscription service. On my absolutely, very, truly first visit. This is the holy grail of e-commerce UX. I never sign up for subscription services. So, how did the Dollar Shave Club win me over and make me a subscriber without ever needing to retarget, track, or otherwise win me back on a return visit? (See the Hacker News discussion for more) 1. 2. Zoomed in - Consider the counter-situation: no default play. 3. Also note how the button points forward. Observe how short and to the point “A great shave for a few bucks” is. 4. 5. 6. 7. 8. 9. Dissected - Crash Course: Design for Startups ? PaulStamatiou.com. I recently stumbled across screenshots of old websites of mine and was hurled into a state of reminiscent shock. I knew they were bad, but wow they were outstandingly horrible (redeemed only by their microformats support!
I kid, I kid). Several years and a few Georgia Tech design and HCI courses have passed since those atrocities graced the web but I archived them in a sort of reverse portfolio as a personal reminder of how much my design sensibilities have matured. Only in the last year have I begun feeling slightly more confident about my design quality and process. I have yet to consider myself a real designer and there are quite a few things I would do differently with my most recent work on Notifo and Pic A Fight. But I've learned why my work nowadays is better than from years past. I am aiming to somehow share some of these thoughts brewing in my head with this post today. I have been brainstorming for the past few days about how to scope this article.
Subtle is key! Process Yikes.