Crafting Subtle & Realistic User Interfaces | Hacker News Reader

Crafting Subtle & Realistic User Interfaces

flyosity.com

138 pointsmcav13 comments

The most realistic UI ever:

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

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.

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.

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.

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' ...

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.

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.

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)

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.

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.

Will be using these guidelines to improve the Stormpulse UI.

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 :-)

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).

Reply on news.ycombinator.com