Lukas Mathis's ignore the code blog offers illustrations of—and explanations for—the user interface sweet spot between visual realism and conceptual shapes. His conclusion? Designers should convey the essence of a symbol. Any more detail distracts, while any less loses the symbol's intent.
Let’s look at a symbol we actually see in user interfaces, the home button. Typically, this button uses a little house as its symbol.
![]()
The thing on the left is a house. The thing on the right means «home». Somewhere between the two, the meaning switches from «a specific house» to «home as a concept». The more realistic something is, the harder it is to figure out the meaning. Again, if the image is simplified too much, it’s not clearly and immediately recognizable anymore.
![]()
The thing on the left is a home button. The thing on the right might as well be an arrow pointing up; or perhaps it’s the ⇧ key. Let me explain this concept using an entirely unscientific graph:
![]()
People are confused by symbols if they have too many or too few details. They will recognize UI elements which are somewhere in the middle.
As an aside, I keep Coda's icon on my dock because it's so uniquely refreshing.