6 ms·

Fltdsgn - a showcase of flat UI design

81 points by adrianhoward 14y ago

jeffcouturier 14y ago
Quick, eveyrone get on the badwagon before the trend dies and we're forced to come up with new, original ideas again!
- adrianhoward 14y ago
  "badwagon" is an excellent, if possibly unintentional, neologism ;-)
  - jeffcouturier 14y ago
    Ha! Unintentional, but I think I like it anyway. That comment is full of typos thanks to writing them on my phone.
chasing 14y ago
In these examples I see real-world textures, gradient overlays, gloss, drop shadows, etc. Most of these aren't "flat" as much as they are bold and somewhat minimalist. And they pay attention to their use of whitespace and fonts. I also see a general aesthetic that most of web design fits into. Hacker News? Flat before flat was flat! And Yahoo! (http://web.archive.org/web/19961128070641/http://www8.yahoo.com http://web.archive.org/web/19961128070641/http://www8.yahoo....) -- seventeen years ahead of the curve! Anyway: I love talking design, but could we elevate the conversation a bit beyond "hey, look: flat design is trendy."
- erichocean 14y ago
  I think "flat design" also includes a lot of attention to typography; thus, HN and Yahoo circa 1995 wouldn't count. WebFonts and especially Retina-class displays are making it possible to do some very interesting work with typography, and once you've got that, the need for faux-2.5D sort of drops away...
- fosap 14y ago
  I like that design style very much. But I agree that "flat" is not the thing that makes these great. The design looks modern, is a old-fashioned 1920ies style. For me it looks Bauhausish.
  - octagonal 14y ago
    Design trends never make a design good.
twodayslate 14y ago
Flat design is just a rebrand of minimalism design
- zalew 14y ago
  fact #1: when most people say 'minimalism' they don't know what that actually means. fact #2: simplicity != minimalism.
  - CamperBob2 14y ago
    What are some ways to distinguish between the two?
octatone2 14y ago
Why do you hate vowels?
- huhtenberg 14y ago
  Well-placed vowels are pretty expensive.
- camus 14y ago
  because it's mnml you know ... minimal my a\\ . Same thing happened in Techno a few years ago , now everybody's back to loud hot Electro. Skeuo. will be hot again soon.
- marknutter 14y ago
  Because people are squatting on all the best vowels.
  - PavlovsCat 14y ago
    flatdesignshowcase.com ? BAM! half as hipster. Now get rid of the flat design and we might have something here ^^
- deleted 14y ago
  [deleted]
nwh 14y ago
This website is hilariously slow to download. Why is each screenshot an enormous PNG?
- Kiro 14y ago
  How else would you do it?
  - chromejs10 14y ago
    Lower res thumbnails of course where if I decide I actually like the UI I click it to view the high res. It's wasteful and slow to have ALL images on the same page be the highest resolution
    - zalew 14y ago
      if you click something that says 'photo gallery' or 'screenshot showcase' you probably should expect there are big images inside. IMO low res thumbnails are the most disgraceful way to showcase pictures. OP website is just really slow though. the screenshots are just 150kb each.
      - ChrisClark 14y ago
        Yes, but the images are much larger than the size they are shown on the site. They are being downloaded full size and resized by the browser to fit. The 'thumbnail' would be the size the site is showing them at right now. Clicking it would bring you to the full size.
      - nwh 14y ago
        There's ~1Mb PNG in there as well, depends heavily on the content.
  - nonamegiven 14y ago
    A small png. Download one of those things, they're five times the size of what gets displayed, but you have to download the whole thing anyway. A little responsibility would have been good.
nchlswu 14y ago
make it stop. please. showcases like this is just indiscriminate bandwagon hopping and the content hasn't even been curated well at all.
chris_engel 14y ago
In case its down for you, too: http://fltdsgn.com.nyud.net/ http://fltdsgn.com.nyud.net/
pistoriusp 14y ago
I really dislike the grayscale transition. Why would you alter the examples that you're trying to outline?
calinet6 14y ago
Frankly, I hate this presentation, because I can't tell where the individual example starts and the container ends. It all looks the same. Which, frankly, is also my argument against flat UI design as a whole. It's too restrictive and most flat UI ends up looking the same, which is good and bad. Use it where appropriate, but it's just another brush in your toolbox.
larrydavid 14y ago
I don't understand all the negativity and dismissal in these comments. The only thing I am not a big fan of is the transition when you hover over an example. Apart from that, I think that for the most part the designs showcased are quite beautiful. But these designs are well done regardless of the fact that they are 'flat'. Proportions/positioning, typography, color are all great.
- deleted 14y ago
  [deleted]
nnq 14y ago
Oh the irony... the showcase site's flat design makes it very hard to distinguish the showcased sites as they visually blend into each other and into the parent site, in the process making a case against flat UI design!
danjessen 14y ago
love it
clicks 14y ago
Sorry, a little bit off-topic but I have to ask -- http://i.imgur.com/7CsRNjD.png http://i.imgur.com/7CsRNjD.png Right side: Chrome; left side: IE. Can someone please explain to me why 'Geckoboard' (as well as the other text) in Chrome has jagged and sharp edges? Why does Chrome always render text so poorly? IE seems to be getting it right.
- Hates_ 14y ago
  A lot of webfonts seem to render badly in Windows Chrome. I've yet to find a solution apart from blacklisting certain fonts.
- cheapsteak 14y ago
  Chromium Issue 137692: Horrible font rendering with Google Web Fonts on Chrome for Windows: https://code.google.com/p/chromium/issues/detail?id=137692 https://code.google.com/p/chromium/issues/detail?id=137692 >I am restricting comments. We know it's bad, we know we need to fix it, and it is in the process of being fixed. Unfortunately it's not as simple as flipping a switch. >There have been plenty of workarounds suggested in the comments already. That's no excuse for us, but it will help you get by until we fix it properly. --Nov 8, 2012
ChrisNorstrom 14y ago
Amazing. I've been doing flat design for over 10 years and didn't realize it. I never would have believed that my unfinished Photoshop layout mockups would one day become a design trend and be sold off as "flat design". Where the design is simpler, cleaner, easier for the designer to produce, and charges the same amount of money to the client. It's basically selling less to the client at the same cost and creating an easier experience for the users. I'm not complaining, it's just interesting how design works. These sites are beautiful. When done right, it really makes the content stand out over the containment.
- JEVLON 14y ago
  The next stage is hidden design. I'm not saying this as a joke. It can be very difficult to understand because almost everything is hidden. It could be called minimalism, but it takes it to such a degree people don't see it. Think of the nest thermostat, jawbone bracelet, or even telling a television to start a movie (and having it just do it, without any visual UI).
davidw 14y ago
They seem to have missed out on the "original" flat design. TWM: http://www.ludd.luth.se/~wilper-8/computer/screenshots/twmdesk.gif http://www.ludd.luth.se/~wilper-8/computer/screenshots/twmde...

81 points by adrianhoward 14y ago

jeffcouturier 14y ago

Quick, eveyrone get on the badwagon before the trend dies and we're forced to come up with new, original ideas again!

adrianhoward 14y ago
"badwagon" is an excellent, if possibly unintentional, neologism ;-)
- jeffcouturier 14y ago
  Ha! Unintentional, but I think I like it anyway. That comment is full of typos thanks to writing them on my phone.

chasing 14y ago

In these examples I see real-world textures, gradient overlays, gloss, drop shadows, etc. Most of these aren't "flat" as much as they are bold and somewhat minimalist. And they pay attention to their use of whitespace and fonts. I also see a general aesthetic that most of web design fits into. Hacker News? Flat before flat was flat! And Yahoo! (http://web.archive.org/web/19961128070641/http://www8.yahoo.com http://web.archive.org/web/19961128070641/http://www8.yahoo....) -- seventeen years ahead of the curve! Anyway: I love talking design, but could we elevate the conversation a bit beyond "hey, look: flat design is trendy."

erichocean 14y ago
I think "flat design" also includes a lot of attention to typography; thus, HN and Yahoo circa 1995 wouldn't count. WebFonts and especially Retina-class displays are making it possible to do some very interesting work with typography, and once you've got that, the need for faux-2.5D sort of drops away...
fosap 14y ago
I like that design style very much. But I agree that "flat" is not the thing that makes these great. The design looks modern, is a old-fashioned 1920ies style. For me it looks Bauhausish.
- octagonal 14y ago
  Design trends never make a design good.

twodayslate 14y ago

Flat design is just a rebrand of minimalism design

zalew 14y ago
fact #1: when most people say 'minimalism' they don't know what that actually means. fact #2: simplicity != minimalism.
- CamperBob2 14y ago
  What are some ways to distinguish between the two?

octatone2 14y ago

Why do you hate vowels?

huhtenberg 14y ago
Well-placed vowels are pretty expensive.
camus 14y ago
because it's mnml you know ... minimal my a\\ . Same thing happened in Techno a few years ago , now everybody's back to loud hot Electro. Skeuo. will be hot again soon.
marknutter 14y ago
Because people are squatting on all the best vowels.
- PavlovsCat 14y ago
  flatdesignshowcase.com ? BAM! half as hipster. Now get rid of the flat design and we might have something here ^^
deleted 14y ago
[deleted]

nwh 14y ago

This website is hilariously slow to download. Why is each screenshot an enormous PNG?

Kiro 14y ago
How else would you do it?
- chromejs10 14y ago
  Lower res thumbnails of course where if I decide I actually like the UI I click it to view the high res. It's wasteful and slow to have ALL images on the same page be the highest resolution
  - zalew 14y ago
    if you click something that says 'photo gallery' or 'screenshot showcase' you probably should expect there are big images inside. IMO low res thumbnails are the most disgraceful way to showcase pictures. OP website is just really slow though. the screenshots are just 150kb each.
    - ChrisClark 14y ago
      Yes, but the images are much larger than the size they are shown on the site. They are being downloaded full size and resized by the browser to fit. The 'thumbnail' would be the size the site is showing them at right now. Clicking it would bring you to the full size.
    - nwh 14y ago
      There's ~1Mb PNG in there as well, depends heavily on the content.
- nonamegiven 14y ago
  A small png. Download one of those things, they're five times the size of what gets displayed, but you have to download the whole thing anyway. A little responsibility would have been good.

nchlswu 14y ago

make it stop. please. showcases like this is just indiscriminate bandwagon hopping and the content hasn't even been curated well at all.

chris_engel 14y ago

In case its down for you, too: http://fltdsgn.com.nyud.net/ http://fltdsgn.com.nyud.net/

pistoriusp 14y ago

I really dislike the grayscale transition. Why would you alter the examples that you're trying to outline?

calinet6 14y ago

Frankly, I hate this presentation, because I can't tell where the individual example starts and the container ends. It all looks the same. Which, frankly, is also my argument against flat UI design as a whole. It's too restrictive and most flat UI ends up looking the same, which is good and bad. Use it where appropriate, but it's just another brush in your toolbox.

larrydavid 14y ago

I don't understand all the negativity and dismissal in these comments. The only thing I am not a big fan of is the transition when you hover over an example. Apart from that, I think that for the most part the designs showcased are quite beautiful. But these designs are well done regardless of the fact that they are 'flat'. Proportions/positioning, typography, color are all great.

deleted 14y ago
[deleted]

nnq 14y ago

Oh the irony... the showcase site's flat design makes it very hard to distinguish the showcased sites as they visually blend into each other and into the parent site, in the process making a case against flat UI design!

danjessen 14y ago

love it

clicks 14y ago

Sorry, a little bit off-topic but I have to ask -- http://i.imgur.com/7CsRNjD.png http://i.imgur.com/7CsRNjD.png Right side: Chrome; left side: IE. Can someone please explain to me why 'Geckoboard' (as well as the other text) in Chrome has jagged and sharp edges? Why does Chrome always render text so poorly? IE seems to be getting it right.

Hates_ 14y ago
A lot of webfonts seem to render badly in Windows Chrome. I've yet to find a solution apart from blacklisting certain fonts.
cheapsteak 14y ago
Chromium Issue 137692: Horrible font rendering with Google Web Fonts on Chrome for Windows: https://code.google.com/p/chromium/issues/detail?id=137692 https://code.google.com/p/chromium/issues/detail?id=137692 >I am restricting comments. We know it's bad, we know we need to fix it, and it is in the process of being fixed. Unfortunately it's not as simple as flipping a switch. >There have been plenty of workarounds suggested in the comments already. That's no excuse for us, but it will help you get by until we fix it properly. --Nov 8, 2012

ChrisNorstrom 14y ago

Amazing. I've been doing flat design for over 10 years and didn't realize it. I never would have believed that my unfinished Photoshop layout mockups would one day become a design trend and be sold off as "flat design". Where the design is simpler, cleaner, easier for the designer to produce, and charges the same amount of money to the client. It's basically selling less to the client at the same cost and creating an easier experience for the users. I'm not complaining, it's just interesting how design works. These sites are beautiful. When done right, it really makes the content stand out over the containment.

JEVLON 14y ago
The next stage is hidden design. I'm not saying this as a joke. It can be very difficult to understand because almost everything is hidden. It could be called minimalism, but it takes it to such a degree people don't see it. Think of the nest thermostat, jawbone bracelet, or even telling a television to start a movie (and having it just do it, without any visual UI).

davidw 14y ago

They seem to have missed out on the "original" flat design. TWM: http://www.ludd.luth.se/~wilper-8/computer/screenshots/twmdesk.gif http://www.ludd.luth.se/~wilper-8/computer/screenshots/twmde...