what are the iconic styles of the 2010s?

[xixxii]

my decade-themed premade layouts are lopsided! i only have one for the 2010s! i have 2 for the 90s, 3 for the 00s, 3 for the 20s, but only 1 for the 10s… i’ve been having a hard time trying to think of iconic 10s-specific trends/styles in design. i can think of fashion that’s iconically 2010s, but not so much web design… i keep thinking of stuff that was more late-00s and only very early 10s :/

a lot of things that were big in the 10s are still pretty big now, more than halfway thru the 20s (like flat vector graphics, brutalism, and corporate memphis for example) so they don’t really have the same classic iconic feeling that feels very “of the moment” in the same way as my other decade-specific layouts! the 2010s in general feels sort of lacking in a distinct identity to me. but! i suspect part of that is because i’m a milennial and too close to see it clearly…? (but i can think of plenty of distinctively 2020s trends, so i dunno, maybe it was just a bit of a bust of a decade lol??)

so, i request help… what are some things you consider iconic designs/trends/visual language of the 2010s?

[pnppl]

Very cool project! I’m curious about this myself. It’s tragic that the Wayback Machine is down.

One that comes to mind is Wikipedia. They had a consistent UI for all of the '10s and only just recently updated it. Probably not a lot of personal pages had this look, but I feel like it was basically the look for informational sites.

Comparing the old layout to the new might be instructive, since the new one screams '20s. Some features that stick out to me are the use of the full width of the screen and the subtle skeuomorphism: “tabs”, slight color differences to make the article seem like it’s “in front”, and blink-and-you’ll-miss-it gradients. The new version is heavily mobile-inflected, has bigger sidebars, and has zero visual depth. It doesn’t even distinguish different parts of the page with different background colors.

But then again, it could be argued that the '10s Wikipedia layout was itself stuck in the '00s. Either way, I guess I see the '10s as a more subdued version of the '00s exuberance. Icons started losing color, skeuomorphic elements were retained but downplayed, and everything became flatter. I feel like the '20s obsession with rounding stuff off was less pronounced too? Like rounded rectangles instead of squircles?

Edit: '10s Facebook has a lot of the same design elements as your Tumblr-inspired one: multiple columns, mostly square, circle shaped highlights. It’s actually VERY square… the corners don’t start to round off until 2019. Current Facebook has very round corners. It also used color to achieve visual depth like Wikipedia (still does this). It also uses a very subtle gradient like WP as well as tabs. Icons are mostly monotone and try to evoke depth. The buttons are surprisingly colorful, though. I also notice that the current site is much whiter; they ditched the iconic blue.

Github was already rounding its corners off a little in 2014, though subtly. It also has the tabs, color contrast, and gradients on buttons. Is the subtle gradient the hallmark of '10s web design?

2015 Wordpress also had the 3D gradient buttons with very slightly round corners. Also tabs. Between 2017 and 2021 the gradients on the buttons vanished, then in 2022 it got overhauled into this giant flat monstrosity.

A more obscure site that’s iconic to me personally is this Lain fansite (epilepsy warning). It’s looked about the same since at least 2014. While its particular style is very distinctive — dithered 1bit images, flickering gifs, full-width characters, limited palette — the basic design element is single-column floating rectangular cards with drop shadows for depth.

[humanfinny]

oh wow i love the 90s and 2000s pages so much! this is a very neat project. from my own personal experience here’s some sites that i remember using A LOT in the early 2010s…

1. deviantart circa. 2010-2014. this is when i used it actively and how i still remember it.

1. habbo hotel. i think i made an account in 2012? it was still populated back then, i think its kinda more dead now…

1. after the death of my beloved quizilla, i moved to take more quizzes at quotev, forgot how ugly this website was lol

[juhis]

When I think about the web design of 2010s, my mind immediately goes to every other site using Bootstrap UI framework and all of them looking essentially the same. Most of my sites used Bootstrap elements too in the early 2010s and they all had the same feel. You could literally look at a site and see that it’s built with Bootstrap.

Those blue buttons still haunt my nightmares.

[xixxii]

@pnppl oh these are all really good insights! definitely spot on i think!! gradients were still in, but more for “depth” than for “shine/glossiness”…

@pnppl

I guess I see the '10s as a more subdued version of the '00s exuberance. Icons started losing color, skeuomorphic elements were retained but downplayed, and everything became flatter. I feel like the '20s obsession with rounding stuff off was less pronounced too? Like rounded rectangles instead of squircles?

yeah, something i’m noticing is that 10s stuff kind of turned the volume and saturation down on a lot of trends! less shiny, less saturated. colors lean desaturated and greyish - there was a lot of blue, but often a kind of grey-toned blue…

@humanfinny thank you for screenshots!! definitely seeing more of those sliiightly-rounded buttons with a bit of gradient… also a thin navbar at the top of the page was big, it seems, huh?
something about that quotev feels very 10s-specific in its ugliness haha.

@juhis ooh that’s helpful! i don’t know anything about frameworks or that aspect of webdev at all, so this is helpful. slightly rounded edges, blue, and grey…!!

another thing i’m seeing here is the thin navbar at the top of the page on a lot of these…

i went poking around wayback and pulled some screenshots of 10s-era sites that felt very “of the era” and they have some of these common elements!

we got GREY, we got GRADIENTS BUT NOT TOO SHINY, we got ROUNDED RECTANGLES…!!

and of course everything was blue blue blue; webdesignmuseum has apps from the 10s but not websites so i saved some pics

kinda big so under a cut

still percolating how to translate these into a layout, but progress is being made…

[fLaMEd]

Yeah, bootstrapped Wordpress themes come to mind

[malifee]

the Guardian’s website came to mind for me, although that might just be because that’s one of the few websites I was using in the early 2010s. Here it is in 2014.

So…lots of colours and hashtags on everything.

[Kiwizoom]

You might like Wordpress’s themes, they came up with a default theme for every year

i was a web developer from 2015 onwards.
I remember in 2015-2018 twitter was still really cool and so was instagram, so I was asked to do masonry waterfalls of scraped posts to detail brand engagement. Tumblr also did a lot of waterfall layout themes. They sort of live in the dinosaur age in some respects so it is still common to see it there. I don’t think brands like to show off feed pages like this anymore, or they use some plugin instead for a small rotator. It’s no longer hip and i dont think people like being reminded of the hellscape towards the end of the decade ( innocence lost etc ).

Bootstrap was also really popular. We still use it now, but old bootstrap has a distinct look, kind of reminds me of mac stoplight colors for buttons, like button states like green for accept/start red for cancel grey for neutral etc we used their default colors across projects regardless of brand design specs. We don’t really normalize them like that anymore atleast where I work. ( It’s more like everything is now as blank and color-free as possible, besides the links being the brand’s requested color )
Bootstrap v2 ( 2011-2013ish?)
Bootstrap v3

Judging by this yeah I think rounded corner buttons were popular early-mid 2010s. They might have some soft shading or hover/depression effects. Later the normalization became no definition and increasingly square, or just generic href links with no button styling.

Towards the end of 2010s I was getting redesigns involving removing borders and dividers around elements which was the most alarming to me as the categorization of the page would fall apart and be harder on UI/UX. Basically white or black backgrounds where elements had no definition or territory. That is leaning towards the outro though.

Towards the mid-end, parallax scroll backgrounds got really popular for a spell! That actually might be a really fun way to make it dated as we don’t really see it much anymore. Some are very corporate like fancy page section, some are really playful like having a background animation. I have a hard time finding the playful examples but I remember them. Parallax is still around but I don’t see it on like a brand’s wishlist anymore for their site, i think. It feels more like it’s more for hype/short-lived marketing things but that’s my thought. I remember it being bundled into default cms page templates more before.

parallax 1
parallax 2
parallax 3
parallax 4 and similar one

I’d also say… any sort of banner rotator, or towards the end swipers.

Unfortunately i think a lot of these are un-fun as web design got increasingly corporate XD but maybe you can make something fun out of them

memey/prominent web stuff of the time - rage comics, i can has cheezburger, demotivational posters, nyan cat, what does the fox say, hipsters, youtube poops/sfms/gmods, 4chan, knowyourmeme, vine, collegehumor, buzzfeed, bieber and gaga covers/jokes, twilight, star wars. IDK if that will help you think of any design ideas or refs.

[humanfinny]

@xixxii

also a thin navbar at the top of the page was big, it seems, huh?

didnt think about that but very true, now i remember this being a frequent design feature!

@xixxii

something about that quotev feels very 10s-specific in its ugliness haha.

oh its hideous. like what is that faux wood paneling background lmao?? i used it often on my ipod touch so i guess it looked less weird on mobile

[xixxii]

really useful insights, thank you! the wordpress default themes are super helpful, i’ll stare at those a lot (kinda boring, but it is useful for structural ideas…)

@Kiwizoom

Towards the mid-end, parallax scroll backgrounds got really popular for a spell! That actually might be a really fun way to make it dated as we don’t really see it much anymore. Some are very corporate like fancy page section, some are really playful like having a background animation. I have a hard time finding the playful examples but I remember them. Parallax is still around but I don’t see it on like a brand’s wishlist anymore for their site, i think. It feels more like it’s more for hype/short-lived marketing things but that’s my thought. I remember it being bundled into default cms page templates more before.

ooh yeah! parallax scroll backgrounds would be a good one. way outside my current skill wheelhouse (it seems like svg + javascript probably?), but it might be a fun new thing to try and learn!

@Kiwizoom

Unfortunately i think a lot of these are un-fun as web design got increasingly corporate XD but maybe you can make something fun out of them

haha yeah, even as i’m getting a better sense of the 10s design sensibilities it’s hard to figure out how to turn it into a personal site template that someone might conceivably want to use and isn’t too similar to my 20s quopyright one. (while i think it is useful for premade template sites to have lots of similar options to choose from for people who struggle with code, i will get bored making something that feels too similar to me lol)

my notes/moodboard so far, if anyone’s curious!