Ask HN: All startup websites look the same | Hacker News Reader

Ask HN: All startup websites look the same

165 pointsphugoid82 comments

All recent startup websites look the same to me. I don't have the designer chops to explain it clearly, but the main style is:

A whole lot of white, plus one dominant color (usually blue, green or dark grey) used for footer/header.

Layout uses light-grey-to-white gradients to make gentle borders between columns and even tabs.

Borders that don't use gradients are always 1px grey.

Large rectangular rounded buttons in dominant color (or green, orange) with white lettering.

Sans serif font everywhere.

Bunch of links that don't fit anywhere are moved to lower footer in small font.

Approximately 940px wide fixed main layout.

http://www.loopt.com/

https://indinero.com/

http://www.nozbe.com/

http://www.peerindex.net/

Does anyone know how/why this came about?

View on HN

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.

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.

A clear call to action massively improves conversion. The rectangular button in a dominant colour will increase signups by 10-20%.

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.

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.

Familiarity matters in web design - the better people can predict where things will be, the better they can navigate.

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.

A lot of people will hit The Back Button if you don't use a sans serif font? Come on.

I'm willing to bet that the average person can't even tell the difference between Serif and Sans Serif typefaces. Not that this will have an effect on their self-conscious, but it's definitely worth something.

I think you mean subconscious.

Don't make him self-conscious.

Part of me wants to vote myself down. Kudos to that.

As a minor footnote, sans serif DOES NOT improve readability. That's a myth. A nice serif typeface such as Baskerville is just as readable as Helvetica & friends.

On paper, serifs can be printed with enough resolution to aid in readability. On screens however, serifs are rendered too coarse and distract. That's why with current screen resolutions, sans serif works better for screen type.

I find serif's easier to read if they're large enough (Readability does it right I think, fairly large serif text).

Indeed, and this trend also seems to prefer large-ish font sizes.

I stand by my assertion that this is a myth. Maybe for small font sizes it matters, but on modern displays, on medium font sizes, in the age of sub-pixel rendering, it shouldn't.

I went Googling for science on this subject and promptly found a review of the usability literature:

http://www.alexpoole.info/academic/literaturereview.html

and a second study:

http://www.unc.edu/~jkullama/inls181/final/serif.html

And a poll of user preferences:

http://www.wilsonweb.com/wmt6/html-email-fonts.htm

The apparent conclusion:

Serifs hsve a small-to-nonexistent effect on the readability of digital text, one way or the other.

However, other qualities like x-height and letter spacing do make a difference. In a Times New Roman vs Arial battle, Arial tends to come out on top. But that may well be because it has a larger x-height.

When you poll users on their preferences they love sans-serif fonts. But a big part of the problem is that so few serif fonts come installed in all browsers. Times New Roman seems to be a poor screen font, and Georgia is better but isn't installed everywhere. In short, the fact that we prefer sans serif fonts for the web may be an artifact of our crappy selection of web fonts.

It will be very interesting to see if and when serifs stage a comeback in the era of 300dpi displays and, more importantly, a much larger choice of fonts.

This might all change with the entrance of tablets, especially if they reach higher resolution.

Serif fonts have the advantage that they have stronger row structure than sans-serif as the serifs act as a line.

So with the improvement of dpi in tablets happen, so will the use of serif fonts increase.

Wasn't this just on HN a few days back? Why you dont use Garamond on the web - http://www.kadavy.net/blog/posts/design-for-hackers-why-you-...

The Baskerville font you are talking about (Monotype’s) is based on large-ish sizes of a typeface designed in the 18th century for print. The stroke weight, x-height, and letter shapes are not well suited to setting blocks of digital text at normal screen sizes. It might work okay for titles and headings, but you should stick with Georgia or similar for body copy.

Helvetica is not an especially readable typeface for more than a few words. It works best for uses like logos, signs, posters, etc. For website copy, Verdana is a much better choice.

I'm interested in more detail regarding your comparison of Helvetica and Verdana, if you're feeling generous.

You can only a/b test what you have come up with in the first place. This is not convergence on the optimum. It's just slightly optimized fashion.

Bingo! And who isn't today immune to infomercials? Or better yet, who doesn't unconsciously avoid big, shiny graphics with the belief that they're banner ads? (I know I do)

The point being that unified design will pick up a unified brand. The original poster is noticing the Young Startup brand, I suppose. In time this brand will become associated withall young startups and the enotional aftertaste will dominate a/b tested behaviors.

Thus the virtue of being innovative in design. Ita not going to (necessarily) lose on a/b testing and it'll help you to avoid brand unification.

I actually wrote a blog post about this a while ago, called "imitation is the sincerest form of flattery" (http://goo.gl/K4RY) because I was hearing people complain that the site I was designing was too "similar" to other sites, specifically 37signals' product marketing sites. But who cares? They're good design patterns. You have to start somewhere.

And aside from that, building a promotional site is hard: http://goo.gl/8OlP. There's a lot of work there that's hard for a programmer to predict in advance, given that programmers generally haven't done things like think about how to market their product to an underserved niche. Tongue somewhat in cheek.

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.

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.

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:

"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."

That's what I was looking for. I was hoping the conversation would bring up some new approach or tech.

This is the first I hear of CSS grid frameworks - I must look into them further.

Edit: By the way, your site looks great to me. I was trying to get at the thinking behind these designs, not to criticize.

Here's that link for 960 grid: http://960.gs/

They have lots of layouts on that page.

there are a couple of really good tools to make your own too

960gs is awesome. You might also want to check this one out: http://www.tinyfluidgrid.com/

What you're describing is good design and UX.

White space is a fundamental of good design.

Light gradients and thin grey lines provide subtle distinctions between content areas without overpowering the content.

A strong, obvious 'Call to Action' button in a vibrant colour encourages click through action.

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').

Moving secondary links to the footer is simply good UX. They're available but out of the way.

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.

(I agree with HNer... the examples you provide all look very different, but are just fairly well designed)

But the definition of good UI is arbitrary.

The folks who designed those old amber IBM terminals (that I still use at work) would have argued that:

- Black background is easy on the eyes.

- The flashing cursor draws your focus.

- The amazing bold font technology breaks up the page very nicely.

So it would appear that "good design" is just a function of the technology available.

Good design is about form following function, and is very dependent on the technology available, you're right.

It's not arbitrary however.

Here are some essentially inviolate principles of good design: http://graphicdesign.spokanefalls.edu/tutorials/process/gest...

You have to admit that while some principles are not arbitrary, there are definite design styles or trends that go in and out of vogue, and at the time everyone was convinced they were good design.

That doesn't mean they weren't. User familiarity is a big part of good design, so playing to the current trend may well make your thing easier to use.

For example, there's no reason why search boxes should have rounded corners - it's just an arbitrary style. But since users are familiar with rounded search boxes, using them could make your site easier to use.

There is no such thing as form. There is only function. Function follows function. Function informs function. So that what we see is a fractal of function, a function of function.

I'd also argue that an uncontroversial definition for 'good design' would be design that functions best for the majority of users.

That somewhat explains the trends you see in design, because when we employ a convergent design standard, it's more readily accessible in a single visit than a design that breaks away from current conventions.

It's also empirically the case that the convergent design standards represent the 'fittest'.

And I would argue that evolutionary speaking they represent 'good design' (that's my definition anyway).

It's fashion. In 10 years we will no doubt make fun of this design.

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.

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 think this is an apples to oranges comparison. i don't know for sure, but flightcaster is probably only building one product for a couple of mobile devices.

loopt on the other hand has been around for a while and has 4 different products (loopt, star, pulse, mix). each one has a different purpose, serves different markets, and pairs up with different devices. you can imagine where the challenge is at: you have 4 things--which one do you want to say first, and how do you want to say it? and risk confusing someone by showing too much about the other 3 too quickly.

i think a better comparison is to someone like zynga or panic, where there are several products developed for several markets. it's an interesting problem when people who aren't aware of your various apps fail to understand fundamentally what your company does. google is still a search company, and their home page still shows a search box, but they don't spend any time explaining any of their other products on their home page either. and yet their products still get used.

I agree. I went to loopt and I had no idea what the product is. I don't have an iphone so I was about to just leave but I hit browse and found that it seems to be a yellow pages thing with a map, but there are only like 10 entries total for my area. I now have ZERO desire ever to return to this site even if I do get an iphone. Flight caster on the other hand explains what it is, if I ever need to use it.

I don't have the designer chops to explain it clearly

Actually that was a pretty clear explanation from where I'm sitting.

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 don't look like that. Hazard of spending too much time on HN I guess....

(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:

All newspapers look the same to me. I don't have designer chops to explain it clearly, but the main style is:

A whole lot of white and no other colors except in the advertisements.

They all use a lot of text to portray their information and they always use black for the text.

They all have the most noteworthy news stories on the front page and with less serious news in the back of the paper. etc...

The question is: "Does anyone know how/why this came about?"

Answering the same question w/r/t newspapers would be fascinating, and well worth an extended discussion.

We must be smoking crack then: http://carbonmade.com/

Pink unicorns. Really?!

I read on http://abtests.com/ that pink unicorns increase conversion by ~10%.

That's really different, but seems fit for the market you are after.

Awesome design, I don't have any art worthy of a portfolio but that was a cool looking site.

Thank you!

Actually, even your site uses the same rounded edges and pastel colors.

That said, it is pretty awesome. !.

We were doing that back in 2006:

http://web.archive.org/web/20060409104104/http://www.carbonm...

Back when Carbonmade was a side project.

Don't know the exact origin (37signals?), but they all probably descend from a common ancestor - which was probably very successful, hence the copying.

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.

Don't know if it's true, but there's a cute urban legend about the location thing.

Apparently, McDonald's franchise location strategy always used to be to analyze all kinds of variables to find the most cost-effective location in a given area. Burger King's strategy was always to build right next to McDonald's.

Of course, for various game-theoretic reasons, the optimal location for competing businesses is usually right next to each other.

I read something similar about Starbucks. Their approach is or was to be located next to a dry cleaner or movie rental business (when they existed). The thought was that people have to go to those stores twice to drop-off and pick-up and they thought it increased the chances that people would stop in for a coffee.

I read something else similar involving Starbucks. Apparently other coffee chains have taken the strategy of building next to Starbucks. The thinking is to let Starbucks pay for marketing, then when the lines are long at Starbucks, people will try the rival instead. Some will prefer it, and so a customer is born.

In the British version of "The Apprentice", one of the contestants located his coffee cart next to a Starbucks and cleaned up as a lower-priced alternative.

Jamba Juice is a well-known example of the "just build next to a Starbucks" philosophy... even when Starbucks weren't everywhere.

I'd think they should put one next to laundromats, mechanic garages, anywhere where you have to kill time.

I always go to the same Jiffy Lube because there's a Starbucks across the street from it.

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.

The formula is something like:

VisualImportance = AreaInPixels * BrightnessContrastToNeighbors * ColourContrastToNeighbors * ValueOfPositionOnPage

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.

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.

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.

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.

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: http://www.panic.com/coda/ It is a great way to show a lot of content on the same page without vertical scrolling.

This is what we use at http://flow.io 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.

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).

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: http://www.loopt.com/ https://indinero.com/ http://www.nozbe.com/ http://www.peerindex.net/

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.

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.

And don't waste our time with the old "A/B tested: BS. Not many startups actually do 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.

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.

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.

Yahtzee! Who would have thought buried way down at the bottom of the thread we'd have someone stumble upon part of the right answer. Thank you alastair, you must be old like me.

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.

Scrollbar takes only about 20 pixels, if we are taking about minimum height of 1024px, that means you can go up to 990px, 960px or so.

I suspect you want a couple dozen horizontal pixels for what designers call "negative space".

1000 actually works quite well with no horizontal scrollbars. And for most local small business sites there are more visitors above 1024 than below.

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.

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 & themes.

Ooo! A swing and a miss. I'll call it a good solid foul ball.

The RoR connection is from 37signals which had something to do with this design trend (but not all).

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

its the same with fashion ages (say black white/ubersized black serif font)

we tried to have a own look.but still not to be off shot

would appreciate feedback if we managed that or not

missed the link http://www.garmz.com

That is a really good looking site. Any reason why the layout isn't centered?

thanks for the feedback. we believe it is better left aligned. a lot of small layout reasons to sum up an strong opinion.

I agree, if you center the container it looks really off-center once you get past those top-right blocks. Left aligned looks great.

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: http://www.drawntoscalehq.com

Reply on news.ycombinator.com