How to Make Your Landing Pages Look Like a Design Team Was Behind It(inonesnap.medium.com)
inonesnap.medium.com
How to Make Your Landing Pages Look Like a Design Team Was Behind It
https://inonesnap.medium.com/unprofessional-landing-pages-how-to-make-your-pages-look-like-a-design-team-was-behind-it-50868ed524fb
27 comments
A few weeks ago, somebody on HN referenced a name for that generically-friendly, ubiquitous style of web art. It's driving me nuts that I can't recall it.
I vaguely recall that it was of a form like [Adjective] [City], where [City] was something kind of unexpected (having to do with some art movement in the past).
I vaguely recall that it was of a form like [Adjective] [City], where [City] was something kind of unexpected (having to do with some art movement in the past).
This.
The doodle has character. The corporate illustration looks like it's either a component of an extremely generic free landing page template, or the product of a very jaded, overworked designer churning out rehashed versions of the same pastel vectors they took from an image stock site 5 times a day.
The rest of the bullets in the article are overused rules blindly followed over the years to ensure no website is differentiable from the last.
Above-the-fold is such a well-known myth it's been used for decades now by middle-managers with 5-minutes-reading-wikipedia design experience to bully designers and developers alike into cramming as much content into an artificial letterbox as possible.
Just pay a designer.
(If you genuinely can't, then use a template; it won't give you anything worse than following this article would)
The doodle has character. The corporate illustration looks like it's either a component of an extremely generic free landing page template, or the product of a very jaded, overworked designer churning out rehashed versions of the same pastel vectors they took from an image stock site 5 times a day.
The rest of the bullets in the article are overused rules blindly followed over the years to ensure no website is differentiable from the last.
Above-the-fold is such a well-known myth it's been used for decades now by middle-managers with 5-minutes-reading-wikipedia design experience to bully designers and developers alike into cramming as much content into an artificial letterbox as possible.
Just pay a designer.
(If you genuinely can't, then use a template; it won't give you anything worse than following this article would)
Exactly. Use your skills to maximise your revenue so you pay others to use their skills.
It is not clear whether we are talking purely about design or also the implementation, which can be another world of pain. I am a very experienced (mainly backend) developer but even some simple front-end tasks like understanding why something isn't aligning as expected take me a long time.
Just pay someone to deliver you the HTML or buy off-the-shelf. Nowadays, you can get something decent from somewhere like Envata for $20!
It is not clear whether we are talking purely about design or also the implementation, which can be another world of pain. I am a very experienced (mainly backend) developer but even some simple front-end tasks like understanding why something isn't aligning as expected take me a long time.
Just pay someone to deliver you the HTML or buy off-the-shelf. Nowadays, you can get something decent from somewhere like Envata for $20!
There is a pretty good free course you can take over at https://zenacademy.com.au/course/landing-pages-that-convert/
It shows you how to put together a minimalist landing page including deriving your features and benefits. Has some templates and checklist.
It shows you how to put together a minimalist landing page including deriving your features and benefits. Has some templates and checklist.
If you're not a designer, use a template on a provider like squarespace. Follow their design guides, copy from sites you like. Don't get too fancy, stick to the basics.
What is a "CTA"? Landing on this article left me confused. Is that good design?
CTA is "Call to Action", basically something to incentivise or get the user to do something on the website (usually register, click something, buy something...). Hope that helps!
Call to action
Call to action. The thing you are convincing the user to do next. Click a button to sign up for a trial, subscribe to a newsletter, etc.
“Call-to-action button”, the big button/link thing (which I never click on) that usually has “Learn more” beside it (which I do click on).
If not knowing what a CTA is is what confused you, then no, it’s not bad design, just bad targeting—you’re not in the target audience for this article right now. Not that you couldn’t be or that you wouldn’t benefit from knowing what it says, but it does require a certain (if minimal) amount of web marketing context to understand.
(That said, I didn’t find the article particularly insightful, but that’s because I don’t much care for or about the goals it concerns—a different way of being out of the target audience.)
If not knowing what a CTA is is what confused you, then no, it’s not bad design, just bad targeting—you’re not in the target audience for this article right now. Not that you couldn’t be or that you wouldn’t benefit from knowing what it says, but it does require a certain (if minimal) amount of web marketing context to understand.
(That said, I didn’t find the article particularly insightful, but that’s because I don’t much care for or about the goals it concerns—a different way of being out of the target audience.)
> 16px. The minimum size of text you should have on any site is 16px. Anything lower than that and you’ll make things hard to read on the web.
Hard disagree, especially for "any site". Hacker News for example uses 12px text and is perfectly readable - if it isn't for you then you shuold be using some form of display scaling instead of wasting everyone else's screen space.
Hard disagree, especially for "any site". Hacker News for example uses 12px text and is perfectly readable - if it isn't for you then you shuold be using some form of display scaling instead of wasting everyone else's screen space.
The most important things isn't so much the text size you choose, but that your site doesn't break or try to fight me when I try to manually increase the zoom level or change the text size.
Hacker News is not readable for me. Text is too small, the button for folding the comment tree is impossible to hit on mobile. I'm reading this website with 150% zoom and the browser window that is 50% the width of my screen.
Nevermind 16 or 12, fixed size is to be avoided, from 2010: https://www.w3.org/QA/Tips/font-size
Nevermind 16 or 12, fixed size is to be avoided, from 2010: https://www.w3.org/QA/Tips/font-size
> Hacker News is not readable for me. Text is too small, the button for folding the comment tree is impossible to hit on mobile. I'm reading this website with 150% zoom and the browser window that is 50% the width of my screen.
What is your monitor size, resolution and view distance and do you use any display scaling?
> Nevermind 16 or 12, fixed size is to be avoided, from 2010: https://www.w3.org/QA/Tips/font-size
I agree that using user preferences is a good idea - however then the body text should be always 100% of the user set font size, never > 100%.
The second best option is to have all sites use a consistent fixed size, and that will necessarily have to be the same as the default browser font size and the common font size of older websites - it can't change just because the average pixel has gotten smaller. Then you can get your desired font size setting a default zoom option.
What is your monitor size, resolution and view distance and do you use any display scaling?
> Nevermind 16 or 12, fixed size is to be avoided, from 2010: https://www.w3.org/QA/Tips/font-size
I agree that using user preferences is a good idea - however then the body text should be always 100% of the user set font size, never > 100%.
The second best option is to have all sites use a consistent fixed size, and that will necessarily have to be the same as the default browser font size and the common font size of older websites - it can't change just because the average pixel has gotten smaller. Then you can get your desired font size setting a default zoom option.
Hey guys, thanks for the perspective! (I'm the guy who wrote the article)
You're right, saying "16px minimum for all sites" was wrong. I have no idea where I heard the phrase "16px is minimum for accessibility", but I guess that just stuck in my head, and since I even found similar sayings in other sources, I took it to be true.
So umm, fake news I guess?
I revised the article to clarify that and left links that go into more detail on font size.
Thanks again. I appreciate everyone voicing their opinions.
You're right, saying "16px minimum for all sites" was wrong. I have no idea where I heard the phrase "16px is minimum for accessibility", but I guess that just stuck in my head, and since I even found similar sayings in other sources, I took it to be true.
So umm, fake news I guess?
I revised the article to clarify that and left links that go into more detail on font size.
Thanks again. I appreciate everyone voicing their opinions.
I run HN at a perpetual 120% (though admittedly not the 133% which would boost 9pt to 16px), because otherwise it’s wildly out of place in my internet experience.
(And then I dislike it when the window gets narrow enough that the mobile styles kick in, which boost the font size a bit.)
(And then I dislike it when the window gets narrow enough that the mobile styles kick in, which boost the font size a bit.)
Whereas I have Chrome set to default to 90%, and have some individual sites set as small as 60%, specifically because too many site designers seem to have drunk the 16pt cool-aid and not tried using their own site in a half-screen-width browser window on a 13 laptop screen.
There are tons of free templates everywhere. Just takes one fitted your taste and adapt it to your landing page and you’re done.
It's amazing how attractive of an ecommerce website you can create with free Shopify templates and good-quality photos. You can make something that's incredibly slick and looks very professional for a template that's <$200 along with good-quality photos.
If you're building a software product, just use Wordpress and a nice template for the marketing pages. It's basically never worth your time to build them yourself.
If you're building a software product, just use Wordpress and a nice template for the marketing pages. It's basically never worth your time to build them yourself.
I like SwipePages — a simple way to create good looking SAAS landing pages. Happy user.
Just use Webflow. It does everything for you, has templates can scale to your needs and also export the code needed to transfer the site somewhere else.
I'll definitely take some mental notes for when I set up my new landing page in a month or too!