1

It's common to use the terms drop shadows, inner shadows, glows, etc - these are all well known and understood

An effect you see all the time is:

  1. a border around
  2. on the top and left, it's a darker color
  3. on the bottom and right, it's lighter than the color in (2)

enter image description here

Skeumorphically, it's symbolically as if the panel is pushed in a few millimeters and of course the falling light causes that side "edges" to be darker (perhaps even a small shadow) and on the far side lighter.

Often the panel "pushed in" is made slightly darker or different..

enter image description here

Anyway, we all see this everywhere -- but what's the best term for this?

As I say, there are clear popular terms for inner shadow, outer shadow, drop shadow, glow, frame, etc. What the heck do you call this?

I can only think of using "emboss" or "pressed" or "pit" in some way; I don't know the answer.


footnote - i quickly made the image above very badly for the sake of posting this question; I'd never use horrible corners and messy lines like that!!

5
  • 1
    What about well?
    – Larivact
    Commented Sep 27, 2015 at 14:58
  • What about inset shadow?
    – passatgt
    Commented Sep 27, 2015 at 16:26
  • Honestly "tray" is a good of term as any. Makes sense.
    – DA01
    Commented Sep 27, 2015 at 21:57
  • Hey DA whassup - you know, it's definitely an iOS dev term; I really think it's pretty unclear to use that. (Also - really it doesn't really look like a tray to me!) I think Das has the answer..)
    – Fattie
    Commented Sep 27, 2015 at 22:17
  • Hi passatgt .. you know, that does kind of make sense when you think about it; what do others think? It tends to confuse me thought with "inner glow". Also a shadow is only on two sides you know .. it's almost like two inner shadows, or something
    – Fattie
    Commented Sep 27, 2015 at 22:20

2 Answers 2

4

Stylistically, the visual design term for that is debossing.

2
  • 3
    This is fantastic. (What the hell are you doing suggesting "tray" in the comment? :-)
    – Fattie
    Commented Sep 27, 2015 at 22:17
  • Sorry men I'd forgot to tick an answer here. Thanks again! Wish I could tick both!!
    – Fattie
    Commented Dec 31, 2015 at 14:45
5

Bootstap uses the term "well" to describe these. http://getbootstrap.com/components/#wells

A well is a container in that causes the content to appear sunken or an inset effect on the page.

3
  • nice one Das !!
    – Fattie
    Commented Sep 27, 2015 at 18:29
  • Note that Bootstrap is using a slightly different effect, however. Instead of showing debossed edges, its using an inset shadow.
    – DA01
    Commented Sep 27, 2015 at 21:56
  • @DA01 True, it does differ depending exactly how you want it implemented. I will say that I have never heard a dev while wireframing describe an element as a debossed element, they simply say "a well". But when it comes down to it your answer is more accurate for this case. I think debossing may be a term more widely known by designers than devs, or perhaps "well" is just a more generic term.
    – DasBeasto
    Commented Sep 28, 2015 at 13:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.