6 ms·

Ask HN: All startup websites look the same

165 points by phugoid 16y ago

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?

mattgratt 16y ago
WordPress templates.
frossie 16y ago
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)
alastair 16y ago
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 16y ago
  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.
mishmash 16y ago
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 16y ago
  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 16y ago
    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 16y ago
      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 16y ago
        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.
HNer 16y ago
These examples all look pretty different to me
michaelfairley 16y ago
~940px is close to the safest assumption you can make of the minimum horizontal resolution for an average user.
- benpixel 16y ago
  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 16y ago
    I suspect you want a couple dozen horizontal pixels for what designers call "negative space".
  - josefresco 16y ago
    1000 actually works quite well with no horizontal scrollbars. And for most local small business sites there are more visitors above 1024 than below.
gsteph22 16y ago
We're not that bad: http://www.drawntoscalehq.com http://www.drawntoscalehq.com
panacea 16y ago
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 16y ago
  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 16y ago
    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/gestaltprinciples/gestaltprinc.htm http://graphicdesign.spokanefalls.edu/tutorials/process/gest...
    - sliverstorm 16y ago
      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.
iliketosleep 16y ago
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.
pvg 16y ago
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 16y ago
  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.
  - deleted 16y ago
    [deleted]
  - pvg 16y ago
    This may be true but I'm not sure it really excuses 'incomprehensible front page'. As you say "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". What on earth do these things mean, what are their purposes, etc, etc. There's no telling from their (wonderfully minimalist) front page. it's an interesting problem when people who aren't aware of your various apps fail to understand fundamentally what your company does. I tend to think this is 'they failed to explain what they are'. If you're blaming the victim it's not an interesting problem, it's just a problem.
hermanthegerman 16y ago
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.
Towle_ 16y ago
Crap. I thought that was cool until you informed me it was already a thing.
mattmiller 16y ago
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
jmtame 16y ago
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 16y ago
  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.
  - deleted 16y ago
    [deleted]
  - ximeng 16y ago
    Here's that link for 960 grid: http://960.gs/ http://960.gs/ They have lots of layouts on that page.
    - pbhjpbhj 16y ago
      there are a couple of really good tools to make your own too
paraschopra 16y ago
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.
retube 16y ago
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 16y ago
  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).
bajsejohannes 16y ago
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.
jdietrich 16y ago
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.
- lovskogen 16y ago
  A lot of people will hit The Back Button if you don't use a sans serif font? Come on.
  - jlgosse 16y ago
    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.
    - alinajaf 16y ago
      I think you mean subconscious.
by 16y ago
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.
sz 16y ago
It's not just startups - look at IBM, Oracle, Microsoft, and Apple. Same idea, a bit more dense because of the amount of information.
kmfrk 16y ago
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.
spencerfry 16y ago
We must be smoking crack then: http://carbonmade.com/ http://carbonmade.com/ Pink unicorns. Really?!
- dchs 16y ago
  I read on http://abtests.com/ http://abtests.com/ that pink unicorns increase conversion by ~10%.
- ronnier 16y ago
  That's really different, but seems fit for the market you are after.
- nkassis 16y ago
  Awesome design, I don't have any art worthy of a portfolio but that was a cool looking site.
  - spencerfry 16y ago
    Thank you!
- gxs 16y ago
  Actually, even your site uses the same rounded edges and pastel colors. That said, it is pretty awesome. !.
  - spencerfry 16y ago
    We were doing that back in 2006: http://web.archive.org/web/20060409104104/http://www.carbonmade.com/ http://web.archive.org/web/20060409104104/http://www.carbonm... Back when Carbonmade was a side project.
arnorhs 16y ago
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 16y ago
  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.
andreasklinger 16y ago
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 16y ago
  missed the link http://www.garmz.com http://www.garmz.com
  - rumpelstiltskin 16y ago
    That is a really good looking site. Any reason why the layout isn't centered?
    - andreasklinger 16y ago
      thanks for the feedback. we believe it is better left aligned. a lot of small layout reasons to sum up an strong opinion.
      - nrb 16y ago
        I agree, if you center the container it looks really off-center once you get past those top-right blocks. Left aligned looks great.
Raphael 16y ago
Those are some extremely annoying landing pages, except for Loopt.
aycangulez 16y ago
I think the slider control orginates from Panic's Coda web site: http://www.panic.com/coda/ 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 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.
sga 16y ago
Clickable links: http://www.loopt.com/ http://www.loopt.com/ https://indinero.com/ https://indinero.com/ http://www.nozbe.com/ http://www.nozbe.com/ http://www.peerindex.net/ http://www.peerindex.net/
wenbert 16y ago
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.
azeemazhar2 16y ago
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 ;)
josefresco 16y ago
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.

165 points by phugoid 16y ago

mattgratt 16y ago

WordPress templates.

frossie 16y ago

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)

alastair 16y ago

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 16y ago
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.

mishmash 16y ago

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 16y ago
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 16y ago
  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 16y ago
    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 16y ago
      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.

HNer 16y ago

These examples all look pretty different to me

michaelfairley 16y ago

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

benpixel 16y ago
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 16y ago
  I suspect you want a couple dozen horizontal pixels for what designers call "negative space".
- josefresco 16y ago
  1000 actually works quite well with no horizontal scrollbars. And for most local small business sites there are more visitors above 1024 than below.

gsteph22 16y ago

We're not that bad: http://www.drawntoscalehq.com http://www.drawntoscalehq.com

panacea 16y ago

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 16y ago
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 16y ago
  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/gestaltprinciples/gestaltprinc.htm http://graphicdesign.spokanefalls.edu/tutorials/process/gest...
  - sliverstorm 16y ago
    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.

iliketosleep 16y ago

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.

pvg 16y ago

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 16y ago
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.
- deleted 16y ago
  [deleted]
- pvg 16y ago
  This may be true but I'm not sure it really excuses 'incomprehensible front page'. As you say "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". What on earth do these things mean, what are their purposes, etc, etc. There's no telling from their (wonderfully minimalist) front page. it's an interesting problem when people who aren't aware of your various apps fail to understand fundamentally what your company does. I tend to think this is 'they failed to explain what they are'. If you're blaming the victim it's not an interesting problem, it's just a problem.

hermanthegerman 16y ago

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.

Towle_ 16y ago

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

mattmiller 16y ago

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

jmtame 16y ago

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 16y ago
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.
- deleted 16y ago
  [deleted]
- ximeng 16y ago
  Here's that link for 960 grid: http://960.gs/ http://960.gs/ They have lots of layouts on that page.
  - pbhjpbhj 16y ago
    there are a couple of really good tools to make your own too

paraschopra 16y ago

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.

retube 16y ago

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 16y ago
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).

bajsejohannes 16y ago

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.

jdietrich 16y ago

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.

lovskogen 16y ago
A lot of people will hit The Back Button if you don't use a sans serif font? Come on.
- jlgosse 16y ago
  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.
  - alinajaf 16y ago
    I think you mean subconscious.

by 16y ago

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.

sz 16y ago

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

kmfrk 16y ago

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.

spencerfry 16y ago

We must be smoking crack then: http://carbonmade.com/ http://carbonmade.com/ Pink unicorns. Really?!

dchs 16y ago
I read on http://abtests.com/ http://abtests.com/ that pink unicorns increase conversion by ~10%.
ronnier 16y ago
That's really different, but seems fit for the market you are after.
nkassis 16y ago
Awesome design, I don't have any art worthy of a portfolio but that was a cool looking site.
- spencerfry 16y ago
  Thank you!
gxs 16y ago
Actually, even your site uses the same rounded edges and pastel colors. That said, it is pretty awesome. !.
- spencerfry 16y ago
  We were doing that back in 2006: http://web.archive.org/web/20060409104104/http://www.carbonmade.com/ http://web.archive.org/web/20060409104104/http://www.carbonm... Back when Carbonmade was a side project.

arnorhs 16y ago

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 16y ago
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.

andreasklinger 16y ago

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 16y ago
missed the link http://www.garmz.com http://www.garmz.com
- rumpelstiltskin 16y ago
  That is a really good looking site. Any reason why the layout isn't centered?
  - andreasklinger 16y ago
    thanks for the feedback. we believe it is better left aligned. a lot of small layout reasons to sum up an strong opinion.
    - nrb 16y ago
      I agree, if you center the container it looks really off-center once you get past those top-right blocks. Left aligned looks great.

Raphael 16y ago

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

aycangulez 16y ago

I think the slider control orginates from Panic's Coda web site: http://www.panic.com/coda/ 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 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.

sga 16y ago

Clickable links: http://www.loopt.com/ http://www.loopt.com/ https://indinero.com/ https://indinero.com/ http://www.nozbe.com/ http://www.nozbe.com/ http://www.peerindex.net/ http://www.peerindex.net/

wenbert 16y ago

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.

azeemazhar2 16y ago

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

josefresco 16y ago

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.