views:

3012

answers:

10

I have developed an application that must be presented on exhibition as advertising. I want it to look more sexy! What tricks do you know that enhance the appearance of your applications?

What are the best design effects the developer can use for its application? I am speaking about: glowing, shadows, maybe forms of buttons, beautiful animation of splash screens and so on.

What is YOUR favourite effect?

+3  A: 

I prefer my effects to be subtle. Some nice, quick, smooth fade in/fade out/glow effects can add a lot of style. If you're going to do bigger animation style effects, splined animations (rather than linear) usually look a little nicer.

Don't over-do it though. If you add too much, your application is going to become frustrating to the users that just want to get the task done.

Justin Niessner
+4  A: 
Daok
+4  A: 

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!

Chris Nicol
+1 for easing. Since I've started working with the UI 'polish' side of XAML I've learned how much a difference good easing can make. Also, very true that a few good uses of effects > lots of effects.
rmoore
Take a look here for visualising different easing functions: http://www.robertpenner.com/easing/
MicSim
+12  A: 

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 totaly 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.2seconds). And for moving animations make sure to use acceleration and decelleration, otherwhise the animation will look really wierd.

hejja
+5  A: 

Here's a video by Billy Hollis where he presents a pretty attractive interface using WPF, so you might be able to glean some ideas there.

http://www.dnrtv.com/default.aspx?showNum=115

Chris Dunaway
Oh ma god .. That's one sexy app he's got running :)
cwap
Nice site, rounded corners, nice color shading, overall decent contrast on text to backgrounds.Only the mouse-over on the menuse bothers me, fades to blue on blue, and hard to read. Might have been better to "show where my mouse is" to give a transition from white text menu to yellow to add more contrast to the blue backgound. Overall nice.
Mark Schultheiss
+6  A: 

I found the following examples:

+3  A: 
This is arguably the most useful effect listed in the answers, as it can be used for something very simple that's otherwise missing from the basic WPF toolset: greying out images on disabled buttons without having to resort to having both an enabled.png and disabled.png (for example) in your assembly's resources. Nice one. :)
Mal Ross
+2  A: 

Cool library to create different effects. Easy to use!

A: 

Specific effects should be taylored to match the concept of the site. Care should be taken that effects do not get in the way of use, and do not have an overkill such that they have a significant impact on performance.

Try to give your visitors something, rather than hitting them with something.

Tasteful subtle effects can often be more dramatic than glaring bursts of over activity.

A site for an attorney for instance should be clear and more bland than one for say a games site which can get quite expressive and still be acceptable.

On color:

The correct mix of color will go a long way to improve appearance with minimal negative impact on use, just use care in different shades of a color group. Try not to have a tan wording on top of a different shade of light brown background for instance, it might degrade the ability to read the text.

I would try to stay away from a mix of colors from opposite sides of the color wheel or a mix of cool and warm colors on the same page.

Personally, I would reserve the neon colors for entertainment related things or where the time you expect visitors to stay is limited.

Often when you are trying to advertise a product or service, less is more.

Mark Schultheiss