Ask HN: All startup websites look the same

The important stuff in the common design pattern has been tested to death - everyone who matters is using clicktracking, a/b/x testing and deep user analytics. The reason they all look the same is the same reason that all infomercials or porn sites use the same basic structure - that's what testing indicates will convert best. Some people know this empirically, some are just blindly aping the fashion, but there is wads of data backing it.<p>Lots of whitespace improves readability, as does the use of a sans serif font. Deviate from either and a lot of people will hit the back button because they can't easily read your text.<p>A clear call to action massively improves conversion. The rectangular button in a dominant colour will increase signups by 10-20%.<p>960px wide because the majority of web users can see a page this wide without scrolling. For the same reason, all the important stuff on the site should fit within the first 500px vertically. a 960px grid is highly divisible and so gives you very flexible layout options with minimal hassle. There's a strong argument for 720px, but it's largely a question of browser demographics.<p>The links in the footer should be stuff for people who know what they're looking for, providing greater information density without added clutter. It works in large part because it's a convention, but it works nonetheless.<p>Familiarity matters in web design - the better people can predict where things will be, the better they can navigate.<p>That isn't to say that all these websites work as well as they should do, but there's only one reason to deviate from the norm - if you've tested something and found that it converts better.

i was one of the designers on loopt.com, and the reason i think most of these sites look the same is because we all go through y combinator hearing the same thing: "the number one enemy is the back button." we just don't have time to overload the home pages with too much stuff if we intend on someone doing something while they're on it. so i think all styles gravitate towards a similar highly-focused product-oriented design.<p>as for the actual ui elements. i think a lot of companies out there, specifically the freelance design firms, are taking their inspiration from apple's mac os x ui elements. the gradients and button styles are very similar, and then other freelance designers will look at that and try to find ways to change or improve that even further. i think it all ultimately derives from apple though.<p>many designers i know of will use a css grid framework; we used grid 960. the reasoning behind the number 960 pixels is described on their web site:<p>"All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with."

What you're describing is good design and UX.<p>White space is a fundamental of good design.<p>Light gradients and thin grey lines provide subtle distinctions between content areas without overpowering the content.<p>A strong, obvious 'Call to Action' button in a vibrant colour encourages click through action.<p>Sans serif fonts work better than serifs in websites because of the inherent limitations with rendering fine details using pixels (they often also communicate 'modern').<p>Moving secondary links to the footer is simply good UX. They're available but out of the way.<p>940px (I'd say 970 actually) is the current sweet spot if you want to target the majority of people's screen resolution to provide a good experience.<p>(I agree with HNer... the examples you provide all look very different, but are just fairly well designed)

It's fashion. In 10 years we will no doubt make fun of this design.<p>It's not necessarily a bad thing that everyone follows the fashion, though. It makes it easy to quickly scan the page.

There's fashion in everything from fashion, through web design to science. I think the clean, sans-serify, widely spaced design grew to prominence in part as a reaction to busy, link-heavy corporate/portal sites and for a time it looked friendly, clean and simple. Now it's so common it manages to also look generic and corporate. The visual design has also become a bit a bit of a habit, at the expense of usability. It doesn't always work.<p>Compare loopt to, say, Flightcaster. Loopt is clean, good-looking and entirely uninformative. What does Loopt do? Why should you be eager to 'partner with' them? Flightcaster is busy, typographically sinful and yet answers the sort of questions you might have if you've never heard of Flightcaster. And you can try it right there and then.

<i>I don't have the designer chops to explain it clearly</i><p>Actually that was a pretty clear explanation from where I'm sitting.<p>And yeah, I've noticed that too, but I have to say it is serving to modify my aesthetic expectations - now I get jarred by websites that <i>don't</i> look like that. Hazard of spending too much time on HN I guess....<p>(Although I have been a fan of rectangular rounded buttons with white lettering since olwm, so at least I can claim I am consistent)

I'm sorry for sounding a bit like a troll, but the number of votes this article is getting is surprising. Let me elaborate:<p>--<p>All newspapers look the same to me. I don't have designer chops to explain it clearly, but the main style is:<p>A whole lot of white and no other colors except in the advertisements.<p>They all use a lot of text to portray their information and they always use black for the text.<p>They all have the most noteworthy news stories on the front page and with less serious news in the back of the paper. etc...

We must be smoking crack then: <a href="http://carbonmade.com/" rel="nofollow">http://carbonmade.com/</a><p>Pink unicorns. Really?!

Don't know the exact origin (37signals?), but they all probably descend from a common ancestor - which was probably very successful, hence the copying.<p>Analogy would be how many big box stores (eg. Home Depot) routinely build next to Wal-Mart, because of course Wal-Mart, Inc. spends millions on and has "location, location, location" down to a science.

My computer programmer approach to design is that you sort the elements of your page (logo, title text, main text, navigation etc) into order of importance. The order you want your visitor to read them. Delete unimportant elements or move them to a subsidiary page. Then give the remainder a corresponding visual importance on the page.<p>The formula is something like:<p>VisualImportance = AreaInPixels * BrightnessContrastToNeighbors * ColourContrastToNeighbors * ValueOfPositionOnPage<p>The top left of the page is more important than the bottom right. Too many colors make it difficult to control the color contrast between neighboring elements.<p>You should be able to squint at a page to see which things are most important.

Hey I am the CEO of PeerIndex -- the rationale is design patterns and frameworks.<p>For our business, UX is important but not absolutely critical (at least at the working proof of concept stage). Excellent design is expensive and time consuming and vital for some businesses. I felt for ours, good and clear would get us very far along--and could be done with a lower investment by using a framework (e.g. blueprint) and some commonly used design patterns.<p>When we know more about our users (A/B test, A/B test, etc) we'll invest increasingly more in the UI and perhaps we'll look and feel different. Although I still see us leaning heavily on frameworks, for the attendant benefits.<p>If you are an awesome UI designer or visualisation person in the mood to challenge us with your thinking, let me know ;)

I think the slider control orginates from Panic's Coda web site: <a href="http://www.panic.com/coda/" rel="nofollow">http://www.panic.com/coda/</a> It is a great way to show a lot of content on the same page without vertical scrolling.<p>This is what we use at <a href="http://flow.io" rel="nofollow">http://flow.io</a> and it works well for us. The instant visual feedback is addictive, and a lot of users click the tabs to learn more about our app. Our bounce rate is very very low. Another interesting thing about this control scheme is that users often click the tabs in the intended order (from left to right) so you can reveal what your app does in easily digestible bite-size chunks.

It's because their major purpose, as a site with mostly visitors who are new to them, is to communicate at first glance what it's about.<p>They don't have the luxury to be able to jump into it and spread all they have over the first page, as websites with known concepts do (news sites, video sites, forums, wikis).<p>So the design might look generic, but that's because as often in design, it solves a specific purpose in a way that doesnt allow too many variations. All knifes look the same.

Clickable links: <a href="http://www.loopt.com/" rel="nofollow">http://www.loopt.com/</a> <a href="https://indinero.com/" rel="nofollow">https://indinero.com/</a> <a href="http://www.nozbe.com/" rel="nofollow">http://www.nozbe.com/</a> <a href="http://www.peerindex.net/" rel="nofollow">http://www.peerindex.net/</a>

I built a cheap website for my startup that is guilty of the same design styles. I would love to try something new and different, but I am not a designer and even if I was I don't have the time.<p>If any quality designer wants to work with a standoff client; let me know: mmiller@agentshowroom.com

It's an evolution of the post web 2.0/37 signals design era. Or as I call it the 1-3-1 design style. I can't believe people are already forgetting this and the youngsters are growing up without knowing it.<p>And don't waste our time with the old "A/B tested: BS. Not many startups <i>actually do</i> A/B testing. They just read a few articles written by other famous startup founders who did do the real work and/or tech bloggers who report on said work and apply the findings to their own sites.<p>My advice; look beyond the (now aging and classic) 1-3-1 and develop your own style. Of course this would require having a real designer involved at your startup which some founders miss when looking for engineering staff.

Standardization is a good thing for many startups. You don't want your users to keep scratching their heads wondering how to signup or what's the value proposition.<p>Though there has to be a balance between creativity and standardization.

Well, my designs are mostly 960px wide because I use Blueprint CSS. Saves me a lot of time. Time is money. The faster I finish things, the more projects I can do on the side, the more money I make.

I always thought it was people borrowing from 37signals. I don't really have a problem with it, looks good enough and if the product works who cares.

These examples all look pretty different to me

~940px is close to the safest assumption you can make of the minimum horizontal resolution for an average user.

Familiar designs that people don't have to learn all over again means that people will focus on the only thing that is different between the sites, which, to me, is great with start-ups who are still struggling with explaining their product.<p>Experimental designs are for start-ups with traction.

WordPress templates.

I always thought they looked the same as they all built on Ruby-on-Rails, which (presumably - I don't know, never done any RoR dev) has a lot of standard pluggable templates &#38; themes.

just a formula which has evolved and seems to work. hence more and more people are using it. now it's at the point where people have a preconceived idea as to what a tech startup website should look like... perception is reality... so unless a company has a groundbreaking new website design, it makes sense for them to conform to peoples' expectations. so yeah, wordpress blog with a particular style of template.

It's not just startups - look at IBM, Oracle, Microsoft, and Apple. Same idea, a bit more dense because of the amount of information.

for me this generic look is the strongest with web products and i assume its that way because you as a customer would expect them to look a certain way<p>its the same with fashion ages (say black white/ubersized black serif font)<p>we tried to have a own look.but still not to be off shot<p>would appreciate feedback if we managed that or not

Crap. I thought that was cool until you informed me it was already a thing.

Those are some extremely annoying landing pages, except for Loopt.

We're not that bad: <a href="http://www.drawntoscalehq.com" rel="nofollow">http://www.drawntoscalehq.com</a>