February 5, 2008 17:52
We've already established that there aren't enough designers for software projects out there. So to help developers do their own little designs, I thought I might point out some basics about things that developers are often doing. Things that aren't really good.
Two things are being used heavily in WPF - rounded corners and dropshadows. Both of these are really cool design elements, but when used with a touch of subtlety. Don't believe me? Check out the image above. The big overall dropshadow of the entire image was created by Windows Live Writer. I'm guessing it (the effect) was designed by developers. This sentence will make more sense when you read below:
Let's take a look at some typical designs I've recently seen in WPF apps.
Figure A above demonstrates a typical gray rounded rectangle with a dropshadow.
Figure B demonstrates a colored rectangle with a dropshadow.
The design don'ts for Fig A:
- The border color is too dark.
- The shadow density/darkness is too much.
- The rounded corners are too rounded.
The design don'ts for Fig B:
- The rounded corners are also too rounded.
- The dropshadow darkness is less than in Fig A, but it is still too dark when compared to the blue color. It does not allow the mind to easily differentiate between the base object and the shadow it throws. It is as confusing as the gray "b" in the blue area.
The more eye-friendly version of Fig A is Fig C:
- The corners are rounded still, but just a little. Subtlety is the key here to make it look classy.
- The border color is a dark gray, not black. It looks less stark, and does not confuse the mind.
- The dropshadow is much lighter. Think about real shadows. An object this close to the "wall" or "floor" would not throw that hard a shadow. If the shadow is that dark, then it can't be that blurry. If it is blurry then it can't be dark. And if it blurry and light, then it has to be appropriately "away" from the object throwing the shadow. Look at real life objects to better understand what I mean.
The more eye-friendly version of Fig B is Fig D:
- Again we have more subtle rounded corners.
- The shadow is lighter and easily differentiated from the base object.
I hope these tips will help you make better designs.