Help me learn the name of this web thing I like!

January 6, 2012 10:12 AM

Is there a name for this sort of website design/template?

I find this sort of web design appealing: example one, two, three, four, five, six. I've seen it used for many new web applications and "web 2.0/3.0" sites. I am sooo not a designer, so I can't even tell what I'm seeing. Let me try to identify a few common points:
- header and footer (usually) with a different background color from the main content
- full blocks of color to separate different sections
- doesn't look layered (no separate visible background)
- lots of whitespace
- big font, not much text

My questions:

How would you describe this style?

Is there maybe a common name for it? (like "Oh, just google 'webbity splat template'!")

If I were looking to buy a premade template or hire someone to make a template like this, how would I describe what I want?

I can do HTML & CSS if I know exactly what I need to achieve (eg. "this certain shade of blue in the background and a 2 px border and 10 px margin"). Could you tell me how to achieve something similar to above examples? Or alternatively, can you give me more examples to study?

posted by gakiko to computers & internet (13 answers total)

Thousands of similar templates like this can be found at :

http://themeforest.net/

You might try keywords like "full width" "simple" "clean"
posted by humboldt32 at 10:25 AM on January 6, 2012 [1 favorite]

If you were hiring me, I'd suggest that you show me these sites and have a chat about what you like about them, and how that can serve the purpose of the site you're building.

The first thing that I see in common (though less so for Remember The Milk) is that they're strongly grid-based. They all look around 960px wide. This suggests to me they were designed using a familiar grid, like the 960gs system. I'm not sure how much help that'll be for googling for similar designs, as most well-designed themes are based on a fixed or fluid grid of some description.

As humboldt32 says, phrases like "clean" can be applied, though it seems that people's opinion of what clean means changes wildly.
posted by Magnakai at 10:44 AM on January 6, 2012 [5 favorites]

There's a website framework called Bootstrap that looks a lot like that. I'm not sure if those sites came first and then Bootstrap was developed as a simple way to launch more or if Bootstrap came first (chicken or egg?) but I think that's sort of what you're looking for.
posted by marylynn at 10:45 AM on January 6, 2012 [1 favorite]

Sorry to threadsit, but I'm going to be pedantic here.

Twitter launched Bootstrap as recently as this August. These definitely pre-date Bootstrap. Grid-based web design had a massive boost in 2005, partially due to this series of articles by Mark Boulton. The CSS Blueprint framework was launched in 2007.
posted by Magnakai at 10:52 AM on January 6, 2012 [1 favorite]

Sorry, meant to add to the bottom of that - Bootstrap looks great, and I'd definitely investigate it as a framework for a quick prototype/fun little site, which is what it was designed to do. However, I would be suspect about basing a full, complex design on it, as you'd inevitably end up removing most of the awesome built in handy things that it contains.
posted by Magnakai at 10:57 AM on January 6, 2012

Search ThemeForest for "app" templates.
posted by DarlingBri at 11:04 AM on January 6, 2012

kinda what magnakai said - I do web sites, but so often the style of what I'm doing is highly derivative of my client's existing sites that I don't consider myself a style maven.

In short, I don't think there's enough shared vocabulary about what you're seeing or looking for to say "this is it" In conversational slang, I would agree with that "web 2.0-ie" idea, but if you actually wanted me to work with you on a design, I'd say - show examples. Nothing wrong with that.

To expand on that "web 2.0" idea while I'm waiting on hold for someone - I think "web 2.0" is characterized by big glossy icons and buttons, not a lot of text on the landing pages (saving the chatty for inside pages), and sometimes a near-annoying assumption that if you got to this page you already know what you're looking for and what it does. :-)
posted by randomkeystrike at 11:04 AM on January 6, 2012 [1 favorite]

imagining there's a period after "this is it" will really help you understand my second sentence...
posted by randomkeystrike at 11:05 AM on January 6, 2012

What you're seeing is not so much a particular template or style, it's more a particular combination of design elements that are popular right now. "Web 2.0" is sorta kinda but not quite the right phrase, we've got to be on at least Web 2.2 by now...

Trying to nail down who originated any aspects of any part of the style is a fool's game; web design (like any type of design) is incestuous and there are a lot of different bits and pieces here that have been borrowed and stolen and refined and passed back and forth so many times that nobody can really claim to have "invented" them.

Your list of the characteristics is a pretty good start. I'd add to it:
* Primary navigation as horizontal menu row. (Secondary navigation is handled differently in all of these, though; you've got everything from floating menus to tab-based subnav to left-hand navbar to wordpress-like link soup to "let's just not show the secondary nav at all"... the only real commonality is a relatively flat site hierarchy)
* page footer used as ad hoc site map
* centered fixed-width pages rather than liquid or fluid layouts (Some are also grid-based, but not all of them)
* heavy use of carousels (those are the bits that slide left and right to highlight different things)
* heavy use of illustrations, bright solid colors, and subtle gradients
* little or no use of textures, patterns, dropshadows, faux-3D, skeuomorphism, or rounded corners (we all got a little overexcited about border-radius for a while; I'm glad to see that's finally going out of style)
* Skimmable (blurb-based) text, especially on the home page

(Note that some of that list is already on the verge of going out of fashion: the new hotness is responsive layouts rather than fixed-width designs, for example... and carousels are getting so popular that I'm expecting a backlash from overuse.)

If I were looking to buy a premade template or hire someone to make a template like this, how would I describe what I want?

Pretty much exactly the way you did here; "here are some examples of what I like, here is why I like them" is a fine place to start. As randomkeystrike says, there isn't really an effective shared vocabulary for this sort of thing.
posted by ook at 11:25 AM on January 6, 2012

I think you're just identifying commonalities in well-designed, really content-focused sort of websites: the content is dictating the aims of the sites. That being the case, and because content differs depending on the client and their business aims, I don't know that a template approach is one that will bring you a lot of joy, though you might be lucky enough to find something that perfectly fits your business needs, or alternately that your content can be adapted to fit into without blocks appearing too gratuitous. In that case, yeah, "web 2.0" might be as close as you're going to get; but I think taking samples of the styles you like to a web designer who's interested in talking about your content in the context of your aims for the site might be the likeliest approach to help you achieve something like this.
posted by springbound at 11:31 AM on January 6, 2012

Sorry, too much editing going on whilst writing there. The end of that first line should say something more like "the content is dictating the layout design".
posted by springbound at 11:33 AM on January 6, 2012

Refer to this thread on Hacker News. Basically it's a startup design idea that's repeated to death because it's simple to execute on, well-tested in terms of 'actions' (sells well), and looks nice on MacBooks.

Much like every government agency website looking like Obama's candidate website, it's basically a big ol' crowd of people doing very similar things because they don't want to start from scratch.
posted by tmcw at 12:52 PM on January 6, 2012 [2 favorites]

Thanks ook for pointing out more characteristics and tmcw for giving me a background story!
posted by gakiko at 2:56 PM on January 6, 2012