Design effects in WPF (tricks to enhance app's appearance)
If you have no feeling for what looks good, then don't try magic tricks like glowing shadows or sparky gradients, it will only look like some awkward app from the late 90s. Like Chris said, effects can ruin an application as quickly as it can make one.
There is no silver bullet for good design, the best tip for someone totally lost is: Less is more. Especially when it comes to colors, avoid using many different colors.
Look on other good looking apps (Photoshop CS4, Adobe Reader 9, OSX Preview, etc etc) they are actually really clean.
If you really want to use some wpf-powers an easy trick is opacity transitions, just keep all animations short (max 0.2 seconds). And for moving animations make sure to use acceleration and deceleration, otherwise the animation will look really weird.
In terms of enhancing your app, here are some things I personally like:
- Dropshadow ... Creates the effect of depth on your application, ensure a global lighting direction otherwise, it is difficult to maintain a good general effect.
- Scaling ... When transitioning from one state to another, the use of scaling draws attention to the control/screen
- Easing ... Whenever there is movement in the screen, the movement should be eased from start to finish.
- Shine ... For rollovers, I like a subtle shine to a control, this can be achieved by moving a subtle gradient across the control.
These are just a few effects ... I think it's import to note that effects can ruin an app as quickly as it can make one, so you want to make sure that the effects you use compliment your application.
From a UX perspective, my advice is that any interaction from the user should be exaggerated. For example, rollover effects, highlighting click interactions, etc.
So in conclusion:
- Use effects to highlight user interaction
- Ensure that effects are used in appropriate places
- Keep the effects subtle
- Avoid excessive use of effects
Hope that helps!
I found the following examples:
Vista Buttons:
Innerglows:
Glass Buttons: