
Crafting Subtle & Realistic User Interfaces - mcav
http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php
======
est
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>

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

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

~~~
trunnell
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
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.

------
wensing
Will be using these guidelines to improve the Stormpulse UI.

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

