5 ms·

Flat UI jQuery Theme

64 points by missenlinx 14y ago

melkisch 14y ago
More stuff available in the same kind of flat design style on http://designmodo.com/flat-free/ http://designmodo.com/flat-free/
IanDrake 14y ago
Nice! This is one of the better looking ones I've seen.
mvkel 14y ago
Wow, great stuff. I was tempted to build this myself. Awesome to see it's already done beautifully!
img 14y ago
From a usability perspective I don't think this really works at all. For most of the UI elements, the only visual indication that you get that something is clickable (buttons, link, collapsibles) or separate (grouped buttons) is on mouse hover. But this is for jQuery Mobile, and you don't get mouse hovers on the devices this is targeted for.
- kevincoughlin 14y ago
  I have to agree with img. This theme runs into problems on mobile devices. Depending on your audience it probably is not intuitive to them that many elements are interactive with the absence of mouseover effects. Still nice to see a flat UI port to jQuery UI though. Cheers.
  - amcdonald 14y ago
    Good article on why a flat ui might be good at: http://alistapart.com/article/material-honesty-on-the-web http://alistapart.com/article/material-honesty-on-the-web Crux of argument can be found in the statement: "Even lighting effects like drop shadows, form shadows, specular highlights, and reflections are dishonest because there’s no light source inside a digital screen that’s manufacturing these lighting effects." The article then puts forward the position that honesty to material creates more timeless design.
    - ysapir 14y ago
      Perhaps the crux of its failure can be found in the statement: "A pure CSS button that’s crafted to look like a vintage stereo knob is dishonest." If your application is a music player, then having anything but a stereo knob to control volume is dishonest. Yes, it is not a hi-fi component made of steel. But you are making a music player. If it doesn't look and feel like a music player, you are dishonest. The same argument can be used to relate to some of the most basic UI metaphors. A desktop is not a physical desktop. But users would prefer a visual layout of icons representing apps on their mobiles and computers than a list of app names to choose from. A window is not a physical window, either. So while flash is bad, denying the role of metaphors is just as bad. Maybe worse.
- jack_trades 14y ago
  Don't be so dramatic. From a usability perspective, it works enough. Also, interactivity is changing and themes are options. People don't hover or click with touch devices. Many UI concepts are in flux (again). Link? Button? Collapsible? Let go of what you know and watch people using flat UI. There are many ways to hint interactions within flat design. As has always been, stick to more abstract interaction fundamentals and processes and don't wed yourself to fads based on current (or old) tooling trends. It's easy enough to use color, contrast, font, positioning, size, shape, etc. all to indicate interaction points. That's all a gradient button is compared to the text in an old message box. Also, there are two major thrusts in flat ui that make it compelling. One is the additional focus on content since the UI takes a step back once you spend less time tweaking artificial details. Which leads into the second point others are making. The time and energy spent in details to achieve fake results in a digital context are dishonest at best and grossly out of place from a design perspective. There's a little bit for everyone in there.
  - wittyphrasehere 14y ago
    This. "Flat UI is bad for usability" keeps getting repeated as a criticism against the flat UI trend but is not actually true. Bad UI design is bad for usability, regardless of VISUAL style. As jack_trades mentions, there are MANY other ways to convey interactivity without artificial depth, texture. Think about a simple modal. Users know to look at the top-right, sometimes left, for controls for the modal. What difference does it make if the user sees a flat X icon or an X inside a beveled, drop-shadowed button? Re: desktop vs. mobile; If a user has to hover over an element just to know if it's interactive then perhaps the design has already failed.
occam65 14y ago
The "flat" style being distributed today is a giant step backwards in usability, I can't for the life of me understand why it's so popular. On desktops, it's not clear until you hover that it's even an interactive element. On mobile? Forget it. You'll have better luck teaching your grandmother the difference between client and server side JavaScript.
- fyi80 14y ago
  It's popular because it's more portable across devices and screen sizes, and designers are too lazy to maintain two sets of UIs, one for fingers and one for mouses.
  - iaskwhy 14y ago
    That's mostly true although there's actually no good reason for that, it's perfectly possible to have a non-flat UI without using any images or special image effects, say the new Google UI without the very subtle gradients, it's minimalistic but not flat, right?
- padolsey 14y ago
  > On desktops, it's not clear until you hover that it's even an interactive element. Have you considered that this is due to you and others being conditioned to believe that beveled/3d elements indicate interactivity whereas flat elements do not? Maybe a change is in order... Also related to the abandonment of "fake" depth in web design is the latest A-List-Apart article, "Material Honesty" - http://alistapart.com/article/material-honesty-on-the-web http://alistapart.com/article/material-honesty-on-the-web
  - ajacksified 14y ago
    It's more likely that the problem is because there's very little perceived affordance[1] that differentiates interactive elements from inert design. [1] http://www.jnd.org/dn.mss/affordances_and.html http://www.jnd.org/dn.mss/affordances_and.html
  - argonaut 14y ago
wittyphrasehere 14y ago
The vertical alignment of the text is off and the colors are a bit muddy compared to the vibrant palette of http://designmodo.com/flat-free/ http://designmodo.com/flat-free/ (which was clearly the inspiration for this).
- simonlc 14y ago
  The vertical align is off in his screenshot, but in Firefox it seems to be spot on. Also I wouldn't worry too much about the colors, that's about the easiest thing to change yourself.
workbench 14y ago
Turquoise? Hope you've got good lawyers because LayerVault will have just sent a DMCA.
akshayaurora 14y ago
I tried porting it to jQM too. https://github.com/iakshay/jqm-flat-ui https://github.com/iakshay/jqm-flat-ui. Didn't really continue.. jQM is for mobile devices why are you using custom dropdown?

64 points by missenlinx 14y ago

More stuff available in the same kind of flat design style on http://designmodo.com/flat-free/ http://designmodo.com/flat-free/

IanDrake 14y ago

Nice! This is one of the better looking ones I've seen.

mvkel 14y ago

Wow, great stuff. I was tempted to build this myself. Awesome to see it's already done beautifully!

img 14y ago

From a usability perspective I don't think this really works at all. For most of the UI elements, the only visual indication that you get that something is clickable (buttons, link, collapsibles) or separate (grouped buttons) is on mouse hover. But this is for jQuery Mobile, and you don't get mouse hovers on the devices this is targeted for.

kevincoughlin 14y ago
I have to agree with img. This theme runs into problems on mobile devices. Depending on your audience it probably is not intuitive to them that many elements are interactive with the absence of mouseover effects. Still nice to see a flat UI port to jQuery UI though. Cheers.
- amcdonald 14y ago
  Good article on why a flat ui might be good at: http://alistapart.com/article/material-honesty-on-the-web http://alistapart.com/article/material-honesty-on-the-web Crux of argument can be found in the statement: "Even lighting effects like drop shadows, form shadows, specular highlights, and reflections are dishonest because there’s no light source inside a digital screen that’s manufacturing these lighting effects." The article then puts forward the position that honesty to material creates more timeless design.
  - ysapir 14y ago
    Perhaps the crux of its failure can be found in the statement: "A pure CSS button that’s crafted to look like a vintage stereo knob is dishonest." If your application is a music player, then having anything but a stereo knob to control volume is dishonest. Yes, it is not a hi-fi component made of steel. But you are making a music player. If it doesn't look and feel like a music player, you are dishonest. The same argument can be used to relate to some of the most basic UI metaphors. A desktop is not a physical desktop. But users would prefer a visual layout of icons representing apps on their mobiles and computers than a list of app names to choose from. A window is not a physical window, either. So while flash is bad, denying the role of metaphors is just as bad. Maybe worse.
jack_trades 14y ago
Don't be so dramatic. From a usability perspective, it works enough. Also, interactivity is changing and themes are options. People don't hover or click with touch devices. Many UI concepts are in flux (again). Link? Button? Collapsible? Let go of what you know and watch people using flat UI. There are many ways to hint interactions within flat design. As has always been, stick to more abstract interaction fundamentals and processes and don't wed yourself to fads based on current (or old) tooling trends. It's easy enough to use color, contrast, font, positioning, size, shape, etc. all to indicate interaction points. That's all a gradient button is compared to the text in an old message box. Also, there are two major thrusts in flat ui that make it compelling. One is the additional focus on content since the UI takes a step back once you spend less time tweaking artificial details. Which leads into the second point others are making. The time and energy spent in details to achieve fake results in a digital context are dishonest at best and grossly out of place from a design perspective. There's a little bit for everyone in there.
- wittyphrasehere 14y ago
  This. "Flat UI is bad for usability" keeps getting repeated as a criticism against the flat UI trend but is not actually true. Bad UI design is bad for usability, regardless of VISUAL style. As jack_trades mentions, there are MANY other ways to convey interactivity without artificial depth, texture. Think about a simple modal. Users know to look at the top-right, sometimes left, for controls for the modal. What difference does it make if the user sees a flat X icon or an X inside a beveled, drop-shadowed button? Re: desktop vs. mobile; If a user has to hover over an element just to know if it's interactive then perhaps the design has already failed.

occam65 14y ago

The "flat" style being distributed today is a giant step backwards in usability, I can't for the life of me understand why it's so popular. On desktops, it's not clear until you hover that it's even an interactive element. On mobile? Forget it. You'll have better luck teaching your grandmother the difference between client and server side JavaScript.

fyi80 14y ago
It's popular because it's more portable across devices and screen sizes, and designers are too lazy to maintain two sets of UIs, one for fingers and one for mouses.
- iaskwhy 14y ago
  That's mostly true although there's actually no good reason for that, it's perfectly possible to have a non-flat UI without using any images or special image effects, say the new Google UI without the very subtle gradients, it's minimalistic but not flat, right?
padolsey 14y ago
> On desktops, it's not clear until you hover that it's even an interactive element. Have you considered that this is due to you and others being conditioned to believe that beveled/3d elements indicate interactivity whereas flat elements do not? Maybe a change is in order... Also related to the abandonment of "fake" depth in web design is the latest A-List-Apart article, "Material Honesty" - http://alistapart.com/article/material-honesty-on-the-web http://alistapart.com/article/material-honesty-on-the-web
- ajacksified 14y ago
  It's more likely that the problem is because there's very little perceived affordance[1] that differentiates interactive elements from inert design. [1] http://www.jnd.org/dn.mss/affordances_and.html http://www.jnd.org/dn.mss/affordances_and.html
- argonaut 14y ago

wittyphrasehere 14y ago

The vertical alignment of the text is off and the colors are a bit muddy compared to the vibrant palette of http://designmodo.com/flat-free/ http://designmodo.com/flat-free/ (which was clearly the inspiration for this).

simonlc 14y ago
The vertical align is off in his screenshot, but in Firefox it seems to be spot on. Also I wouldn't worry too much about the colors, that's about the easiest thing to change yourself.

workbench 14y ago

Turquoise? Hope you've got good lawyers because LayerVault will have just sent a DMCA.

akshayaurora 14y ago

I tried porting it to jQM too. https://github.com/iakshay/jqm-flat-ui https://github.com/iakshay/jqm-flat-ui. Didn't really continue.. jQM is for mobile devices why are you using custom dropdown?