
Ask HN: All startup websites look the same - phugoid
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:<p>A whole lot of white, plus one dominant color (usually blue, green or dark grey) used for footer/header.<p>Layout uses light-grey-to-white gradients to make gentle borders between columns and even tabs.<p>Borders that don't use gradients are always 1px grey.<p>Large rectangular rounded buttons in dominant color (or green, orange) with white lettering.<p>Sans serif font everywhere.<p>Bunch of links that don't fit anywhere are moved to lower footer in small font.<p>Approximately 940px wide fixed main layout.<p>http://www.loopt.com/<p>https://indinero.com/<p>http://www.nozbe.com/<p>http://www.peerindex.net/<p>Does anyone know how/why this came about?
======
jdietrich
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.

~~~
DrJokepu
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.

~~~
Luyt
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.

~~~
DrJokepu
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.

~~~
mechanical_fish
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.

~~~
ThomPete
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.

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

~~~
phugoid
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.

~~~
ximeng
Here's that link for 960 grid: <http://960.gs/>

They have lots of layouts on that page.

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

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

~~~
phugoid
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.

~~~
panacea
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...](http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm)

~~~
sliverstorm
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.

~~~
alextgordon
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.

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

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

~~~
jmtame
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.

------
frossie
_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)

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

~~~
jacobolus
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.

------
spencerfry
We must be smoking crack then: <http://carbonmade.com/>

Pink unicorns. Really?!

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

That said, it is pretty awesome. !.

~~~
spencerfry
We were doing that back in 2006:

[http://web.archive.org/web/20060409104104/http://www.carbonm...](http://web.archive.org/web/20060409104104/http://www.carbonmade.com/)

Back when Carbonmade was a side project.

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

~~~
philwelch
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.

~~~
SRSimko
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.

~~~
btilly
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.

~~~
ruang
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.

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

------
azeemazhar2
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 ;)

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

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

------
sga
Clickable links: <http://www.loopt.com/> <https://indinero.com/>
<http://www.nozbe.com/> <http://www.peerindex.net/>

------
mattmiller
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

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

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

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

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

~~~
josefresco
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.

------
HNer
These examples all look pretty different to me

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

~~~
benpixel
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.

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

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

------
mattgratt
WordPress templates.

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

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

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

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

------
andreasklinger
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

~~~
andreasklinger
missed the link <http://www.garmz.com>

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

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

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

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

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

------
gsteph22
We're not that bad: <http://www.drawntoscalehq.com>

