4 ms·

Crafting Subtle & Realistic User Interfaces

138 points by mcav 17y ago

wensing 17y ago
Will be using these guidelines to improve the Stormpulse UI.
- mixmax 17y ago
  Stormpulse is the first time I've ever been interested in tornadoes, simply because the interface is good and the site is fun. Keep up the great work :-)
  - wensing 17y ago
    Thanks! I'm pushing a many, many hour week here doing a speed improvement. Can't wait to release it (will make our severe weather maps load much faster, and add a couple levels of zoom).
est 17y ago
The most realistic UI ever: http://www.mintpass.com/select/select_detail.asp?idx=117 http://www.mintpass.com/select/select_detail.asp?idx=117 ---------------------- Inspired by layersapp.com. Since win32 window and controls are standardized, why can't we make awesome screenshots like the Chrome ads do? http://i.imgur.com/tYGFk.jpg http://i.imgur.com/tYGFk.jpg
fizx 17y ago
This is a really great article for today's design trends. It provides the sort of knowledge that would really help a mediocre designer (i.e. multitasking founder) jump up a level. I wonder tho. These principles were presented as universal. I wonder if the 2d/3d design trends are really universal, or whether it would be reasonable if something else had/will evolve.
teye 17y ago
One that's never occurred to me as a rule: "When using type within an interface element, it either sits on top (dark 1px drop shadow) or is inset (white 1px drop shadow), it's never at the same surface as a button or widget." Will have to pay more attention next time I'm doing this.
- wensing 17y ago
  When he says 'interface element', do you take that to mean a button or what? In one sense, everything on the screen is an 'interface element' ...
  - teye 17y ago
    I take it to mean any interface element you're making in Photoshop -- buttons, nav, etc. Now that I think about it, I stick to CSS most of the time and try to keep images to a minimum (front-end optimization is a tough habit to kick), so I may forget this by the time the next occasion arises.
    - amvp 17y ago
      For newer browsers (ff3.5, new safari and webkit) there are css3 commands you can use to provide this kind of eye candy simply. You can add a drop shadow to text (-moz-text-shadow, -webkit-box-shadow, or generally text-shadow), Or to elements (-moz-box-shadow, -webkit-box-shadow or generally box-shadow). Or rounded corners (border-radius). Given that these elements are only eye candy, I don't worry too much that they are invisible on IE and older browsers. Think of it as free candy.
      - pmjordan 17y ago
        IE supports this kind of effect via the filter: CSS property. MSDN has tons of information on this. (I'm not saying this is a nice way to implement it, but it does at least work)
      - trunnell 17y ago
        Only eye candy? I would not underestimate the importance of an application's visual aesthetic. As the author demonstrates, even subtle details (like a 1px drop shadow) can breathe life into an interface. We developers might dismiss 1px drop shadows an unimportant; after all, the "real" application is the code we write. But users make no such distinctions. To them, the interface is the application.
jcromartie 17y ago
I don't like large amounts of inset text. It looks fantastic for section headers and UI element labels, but it's not a great look for prose (like this article uses). The inset becomes subtly distracting.
Semiapies 17y ago
A caveat about the whole urge to make UIs look three-dimensional: it takes more caution to prevent screwing up. More so than with a two-dimensional style, we catch subtle visual miscues and dislike them. Things must be consistent: every 3D widget needs to appear to have the same light source and be plausibly oriented to each other, just as a start. The need for visual consistency sets up a tight coupling in 3D designs. For instance, take the OS X Leopard dock, which went from a minimally 3D background that icons "laid" on to a much more 3D table on which icons "stood". Icons designed for the old dock looked wrong in the new dock.

138 points by mcav 17y ago

wensing 17y ago

Will be using these guidelines to improve the Stormpulse UI.

mixmax 17y ago
Stormpulse is the first time I've ever been interested in tornadoes, simply because the interface is good and the site is fun. Keep up the great work :-)
- wensing 17y ago
  Thanks! I'm pushing a many, many hour week here doing a speed improvement. Can't wait to release it (will make our severe weather maps load much faster, and add a couple levels of zoom).

est 17y ago

The most realistic UI ever: http://www.mintpass.com/select/select_detail.asp?idx=117 http://www.mintpass.com/select/select_detail.asp?idx=117 ---------------------- Inspired by layersapp.com. Since win32 window and controls are standardized, why can't we make awesome screenshots like the Chrome ads do? http://i.imgur.com/tYGFk.jpg http://i.imgur.com/tYGFk.jpg

fizx 17y ago

This is a really great article for today's design trends. It provides the sort of knowledge that would really help a mediocre designer (i.e. multitasking founder) jump up a level. I wonder tho. These principles were presented as universal. I wonder if the 2d/3d design trends are really universal, or whether it would be reasonable if something else had/will evolve.

teye 17y ago

One that's never occurred to me as a rule: "When using type within an interface element, it either sits on top (dark 1px drop shadow) or is inset (white 1px drop shadow), it's never at the same surface as a button or widget." Will have to pay more attention next time I'm doing this.

wensing 17y ago
When he says 'interface element', do you take that to mean a button or what? In one sense, everything on the screen is an 'interface element' ...
- teye 17y ago
  I take it to mean any interface element you're making in Photoshop -- buttons, nav, etc. Now that I think about it, I stick to CSS most of the time and try to keep images to a minimum (front-end optimization is a tough habit to kick), so I may forget this by the time the next occasion arises.
  - amvp 17y ago
    For newer browsers (ff3.5, new safari and webkit) there are css3 commands you can use to provide this kind of eye candy simply. You can add a drop shadow to text (-moz-text-shadow, -webkit-box-shadow, or generally text-shadow), Or to elements (-moz-box-shadow, -webkit-box-shadow or generally box-shadow). Or rounded corners (border-radius). Given that these elements are only eye candy, I don't worry too much that they are invisible on IE and older browsers. Think of it as free candy.
    - pmjordan 17y ago
      IE supports this kind of effect via the filter: CSS property. MSDN has tons of information on this. (I'm not saying this is a nice way to implement it, but it does at least work)
    - trunnell 17y ago
      Only eye candy? I would not underestimate the importance of an application's visual aesthetic. As the author demonstrates, even subtle details (like a 1px drop shadow) can breathe life into an interface. We developers might dismiss 1px drop shadows an unimportant; after all, the "real" application is the code we write. But users make no such distinctions. To them, the interface is the application.

jcromartie 17y ago

I don't like large amounts of inset text. It looks fantastic for section headers and UI element labels, but it's not a great look for prose (like this article uses). The inset becomes subtly distracting.

Semiapies 17y ago

A caveat about the whole urge to make UIs look three-dimensional: it takes more caution to prevent screwing up. More so than with a two-dimensional style, we catch subtle visual miscues and dislike them. Things must be consistent: every 3D widget needs to appear to have the same light source and be plausibly oriented to each other, just as a start. The need for visual consistency sets up a tight coupling in 3D designs. For instance, take the OS X Leopard dock, which went from a minimally 3D background that icons "laid" on to a much more 3D table on which icons "stood". Icons designed for the old dock looked wrong in the new dock.