Buenos usos y costumbres
de UX para comportarse en sociedad

Light Comes From the Sky

When light comes from the sky, it illuminates the tops of things and casts shadows below them. The tops of stuff are lighter, the bottoms are darker.

Our screens are flat, but we’ve invested a great amount of art into making just about everything on them appear be 3-D.

Buttons

The unpushed button (top) has a dark bottom edge. Sun don’t shine there, son.



The unpushed button is slightly brighter at the top than at the bottom. This is because it imitates a slightly curved surface. Just as how you’d need to tilt a mirror held in front of you up to see the sun in it, surfaces that are tilted up reflect a biiiiit more of the sun’s light towards you.



The unpushed button casts a subtle shadow– perhaps easier to see in the magnified section.



The pushed button, while still darker at the bottom than at the top, is overall darker– this is because it’s at the plane of the screen and the sun can’t hit it as easily. One could argue that all the pushed buttons we see in real life are darker too, because our hands are blocking the light.

click to edit

Elements that are generally inset:

Text input fields

Pressed buttons

Slider tracks

Radio button (unselected)

Checkboxes

Elements that are generally outset:

Buttons (unpressed)

Slider buttons

Dropdown controls

Cards

The button part of a selected radio button

Popups

Black and White First

Designing in grayscale before adding color simplifies the most complex element of visual design– and forces you to focus on spacing and laying out elements.

Start with the harder problem of making the app beautiful and usable in every way, but without the aid of color. Add color last, and even then, only with purpose.

B&WF forces you to focus on things like spacing, sizes, and layout first. And those are the primary concerns of a clean and simple design.

There are some cases where B&WF isn’t as useful. Designs that have a strong specific attitude— “sporty”, “flashy”, “cartoony”, etc. — need a designer who can use color extremely well. But most apps don’t have a specific attitude except clean and simple. Those that do are admittedly much harder to design.