rss or subscribe by email

nukeation.com | follow us on Facebook | contact us

Big don'ts of design for developers

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.

BadDesign_ShadowsBorders

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.


  Share



E-mail | Permalink | Comments (18) | Trackback | Digg! | Kick it! | DZone it! | del.icio.us

Comments

March 3. 2008 03:41

Pingback from blogs.microsoft.co.il

UI - פוסט 10: מתודולוגיה בפיתוח ממשקי משתמש - שיטות בהנדסת תוכנה: מעצב vs. מפתח - Maxim

blogs.microsoft.co.il

March 21. 2008 13:33

Unfortunately drop shadows are a big don't in WPF from a performance perspective. It forces the rendering of the element and its container to be done in software instead of in hardware, and that can have some huge performance drawbacks if done too much.

Brian Noyes

April 4. 2009 06:16

You should really emphasize that the overall point here is contrast. This gives examples of specific cases, but doesn't really explain why. I personally think D also needs more contrast, which could be provided by a less feathered and darker drop shadow.

A lot of the subjective nature of this is also evident in the surface it's covering, as WPF heavily layers objects with transparency support, high contrast for one surface might be poor for another, but overall, I think the point you make it valid.

Kitty

May 20. 2010 05:30

Pingback from 193.an74.com

Plymouth Prowler Tail Light, Prowler Pokemon Platinum

193.an74.com

Comments are closed

Powered by the awesome BlogEngine.NET 1.6.1.0 | Sign in