10 ms·

Show HN: My weekend Project - Almost Flat UI Theme

100 points by websymphony 13y ago

ummjackson 13y ago
Is anyone else sick of fedoras?
- Samuel_Michon 13y ago
  Nope, Fedoras are timeless. http://meninfedoras.tumblr.com/ http://meninfedoras.tumblr.com/
  - rhdoenges 13y ago
    Sorry, thought you said http://fedorasofokc.tumblr.com/ http://fedorasofokc.tumblr.com/
cmwelsh 13y ago
Nice work! I like it. One small bug: on the iPhone Google Chrome view of the green button group, there is a strange difference in appearance when compared to the rendering in desktop Google Chrome. http://i.imgur.com/KBCepbX.png http://i.imgur.com/KBCepbX.png
- websymphony 13y ago
  Thank you, yea that does look odd. Will fix it.
jamesjporter 13y ago
Wow looks great! One little piece of advice: the "disabled" button doesn't look quite inactive enough to me; if I saw it on a webpage I might try to click on it. Maybe make it a bit lighter/more transparent?
- websymphony 13y ago
  Thank you! Good suggestion, will do.
deleted 13y ago
[deleted]
yesimahuman 13y ago
It wasn't immediately clear, but this is for the Foundation framework. It looks great, nice work!
- websymphony 13y ago
  Thank you. Added that in the header now.
martinced 13y ago
It's nice but the dropdown selection suffers from the common issue that Amazon solved using "fuzzier" mouse tracking. Trying to get to the last dropdown box on this "Almost Flat UI" is hard: as soon as you're one or two pixels off everything disappears.
jokeofweek 13y ago
Looks great! Just a small typo: "You can also you <em> to italicize your words."
- websymphony 13y ago
  Thanks! Fixed it.
drivebyacct2 13y ago
Foundation is already as flat as it gets... Is the red supposed to be orange and the green a teal color :S ? The list bullets/numbers are too far left, out of alignment with the header. I really don't think the colors go together well, I hate to make such a subjective comment but I can't get over it... Check out the Foundation docs, I don't really get what all is modified here beyond the colors: http://foundation.zurb.com/docs/components/alert-boxes.html http://foundation.zurb.com/docs/components/alert-boxes.html I suppose there are a few places that there is an extra contrast color that adds a bit of dimension to the buttom/form elements that could go to match "Flat" better, but otherwise...
- tricolon 13y ago
  Regarding the list bullets and numbers: this style is known as hanging punctuation [1] and is "classically correct". [1] http://en.wikipedia.org/wiki/Hanging_punctuation http://en.wikipedia.org/wiki/Hanging_punctuation
33degrees 13y ago
Nice! A couple of comments though 1) The separators in the top bar are a bit too 3d to fit with the rest 2) The button borders are not dark enough in the button groups
hnriot 13y ago
I don't see any design here, it's just change a few colors that don't go together. My opinion, you should have gone surfing.
- deleted 13y ago
  [deleted]
anonfunction 13y ago
Apart from the logo, it's not doing it for me. That's not very helpful though so here's my one suggestion: the button hover state isn't very well distinguished form the regular button.
proexploit 13y ago
Really nice. I'd remove the hover effect from the disabled button style though. You want to communicate with the user that the item is not activated and having a hover just makes it a light colored button.
antoniuschan99 13y ago
Amit you are very talented. Thank you for this! Check out an app I'm working on. I think you'll like it. http://kokonautlabs.wordpress.com/2013/03/25/my-app/ http://kokonautlabs.wordpress.com/2013/03/25/my-app/
- antoniuschan99 13y ago
  Also check out his app HipCV. It literally took me 20 seconds to turn my linkedin resume into a really really good resume lol. Check it out: https://hipcv.com/antonchan/r/linkedin-imported-resume-march-25-2013 https://hipcv.com/antonchan/r/linkedin-imported-resume-march...
  - websymphony 13y ago
    I am glad HipCV was useful for you.
- websymphony 13y ago
  Thank you for your kind words Anton. I am glad you liked it. Your app screenshots look good, I couldn't find a link to test it though. Would love to try it.
huhtenberg 13y ago
So now we have trivial UI themes floating in the top half of the Hacker News front page. Lovely, just lovely.
muxxa 13y ago
The buttons would be great with a separate :active style which reinforces that they are bona fide functioning buttons with some extra 3D on the mousedown.
eclipticplane 13y ago
I know you can't control the colors used by whoever uses your theme, but please consider offering fewer / more distinct colors. R/g colorblindness affects around 5-10% of males depending on region, which depending on your market, can be a huge subset. The default colors you're offering, if used together, are not distinct enough to be told apart. [1] This is not an easy problem to "fix", however, but generally limiting the number of colors and trying to make sure they are outside of the most common color blindness ranges [2]. Of course, the onus is on the designer using your templates; not you, but I always feel this information is relevant when discussing design themes. [1] http://imgur.com/a/CuDiw http://imgur.com/a/CuDiw [2] http://en.wikipedia.org/wiki/Color_blindness#Epidemiology http://en.wikipedia.org/wiki/Color_blindness#Epidemiology

100 points by websymphony 13y ago

ummjackson 13y ago

Is anyone else sick of fedoras?

Samuel_Michon 13y ago
Nope, Fedoras are timeless. http://meninfedoras.tumblr.com/ http://meninfedoras.tumblr.com/
- rhdoenges 13y ago
  Sorry, thought you said http://fedorasofokc.tumblr.com/ http://fedorasofokc.tumblr.com/

cmwelsh 13y ago

Nice work! I like it. One small bug: on the iPhone Google Chrome view of the green button group, there is a strange difference in appearance when compared to the rendering in desktop Google Chrome. http://i.imgur.com/KBCepbX.png http://i.imgur.com/KBCepbX.png

websymphony 13y ago
Thank you, yea that does look odd. Will fix it.

jamesjporter 13y ago

Wow looks great! One little piece of advice: the "disabled" button doesn't look quite inactive enough to me; if I saw it on a webpage I might try to click on it. Maybe make it a bit lighter/more transparent?

websymphony 13y ago
Thank you! Good suggestion, will do.

deleted 13y ago

[deleted]

yesimahuman 13y ago

It wasn't immediately clear, but this is for the Foundation framework. It looks great, nice work!

websymphony 13y ago
Thank you. Added that in the header now.

martinced 13y ago

It's nice but the dropdown selection suffers from the common issue that Amazon solved using "fuzzier" mouse tracking. Trying to get to the last dropdown box on this "Almost Flat UI" is hard: as soon as you're one or two pixels off everything disappears.

jokeofweek 13y ago

Looks great! Just a small typo: "You can also you <em> to italicize your words."

websymphony 13y ago
Thanks! Fixed it.

drivebyacct2 13y ago

Foundation is already as flat as it gets... Is the red supposed to be orange and the green a teal color :S ? The list bullets/numbers are too far left, out of alignment with the header. I really don't think the colors go together well, I hate to make such a subjective comment but I can't get over it... Check out the Foundation docs, I don't really get what all is modified here beyond the colors: http://foundation.zurb.com/docs/components/alert-boxes.html http://foundation.zurb.com/docs/components/alert-boxes.html I suppose there are a few places that there is an extra contrast color that adds a bit of dimension to the buttom/form elements that could go to match "Flat" better, but otherwise...

tricolon 13y ago
Regarding the list bullets and numbers: this style is known as hanging punctuation [1] and is "classically correct". [1] http://en.wikipedia.org/wiki/Hanging_punctuation http://en.wikipedia.org/wiki/Hanging_punctuation

33degrees 13y ago

Nice! A couple of comments though 1) The separators in the top bar are a bit too 3d to fit with the rest 2) The button borders are not dark enough in the button groups

hnriot 13y ago

I don't see any design here, it's just change a few colors that don't go together. My opinion, you should have gone surfing.

deleted 13y ago
[deleted]

anonfunction 13y ago

Apart from the logo, it's not doing it for me. That's not very helpful though so here's my one suggestion: the button hover state isn't very well distinguished form the regular button.

proexploit 13y ago

Really nice. I'd remove the hover effect from the disabled button style though. You want to communicate with the user that the item is not activated and having a hover just makes it a light colored button.

antoniuschan99 13y ago

Amit you are very talented. Thank you for this! Check out an app I'm working on. I think you'll like it. http://kokonautlabs.wordpress.com/2013/03/25/my-app/ http://kokonautlabs.wordpress.com/2013/03/25/my-app/

antoniuschan99 13y ago
Also check out his app HipCV. It literally took me 20 seconds to turn my linkedin resume into a really really good resume lol. Check it out: https://hipcv.com/antonchan/r/linkedin-imported-resume-march-25-2013 https://hipcv.com/antonchan/r/linkedin-imported-resume-march...
- websymphony 13y ago
  I am glad HipCV was useful for you.
websymphony 13y ago
Thank you for your kind words Anton. I am glad you liked it. Your app screenshots look good, I couldn't find a link to test it though. Would love to try it.

huhtenberg 13y ago

So now we have trivial UI themes floating in the top half of the Hacker News front page. Lovely, just lovely.

muxxa 13y ago

The buttons would be great with a separate :active style which reinforces that they are bona fide functioning buttons with some extra 3D on the mousedown.

eclipticplane 13y ago

I know you can't control the colors used by whoever uses your theme, but please consider offering fewer / more distinct colors. R/g colorblindness affects around 5-10% of males depending on region, which depending on your market, can be a huge subset. The default colors you're offering, if used together, are not distinct enough to be told apart. [1] This is not an easy problem to "fix", however, but generally limiting the number of colors and trying to make sure they are outside of the most common color blindness ranges [2]. Of course, the onus is on the designer using your templates; not you, but I always feel this information is relevant when discussing design themes. [1] http://imgur.com/a/CuDiw http://imgur.com/a/CuDiw [2] http://en.wikipedia.org/wiki/Color_blindness#Epidemiology http://en.wikipedia.org/wiki/Color_blindness#Epidemiology