Create Visual Appeal in Your UI
- Skill Level Beginner
- Supported Versions JavaFX 1.2
- Key Features Visual Effects, Design Patterns
- Last Updated May 2009
Modern user interfaces subtly convey that you are looking at a three-dimensional object and not a two-dimensional screen with drawings. This perception is achieved with the careful use of colors and effects. Here are some simple suggestions for creating a visually appealing UI with JavaFX technology.
Use modern colors. Explore online resources for color schemes.
Avoid using the default colors you get by simply using color.NAME. Use of those colors is fairly certain to lead to a visual effect that is evocative of the web, circa 1996. Instead try some of the other options that are available to you. For instance, color.web("#HEXCODEHERE") enables you to use colors specified by using the hexadecimal code. This code considerably expands the color choices available to you. These multiple choices in turn bring up the question: Which colors to use?
Here are a few resources:
- Web 2.0 color palette (some popular colors in the Web 2.0 world)
- Color palettes galore
- A nice online color picker
Gradients - Use them judiciously for a modern look.
- Avoid radial gradients, unless you are willing to go the whole distance
and create a full 3-D object. If all you want to do is create a slightly
3-D look, the linear gradient is your friend.
- When you choose colors for a linear gradient, remember that the gradient is really supposed to convey the presence of a light source. So avoid dramatic differences in the colors at both ends of the gradients. In other words, the gradient should be between two colors that are very similar. To avoid loss of saturation, choose one color by using a color picker, and choose the second color by moving up or down diagonally. (See also Gradient Tutorial.)
- Avoid radial gradients, unless you are willing to go the whole distance
and create a full 3-D object. If all you want to do is create a slightly
3-D look, the linear gradient is your friend.
Drop Shadow: Keep the shadow very small and subtle.
Making the drop shadow too "thick" makes the element look heavy. The color of the shadow should be realistic, possibly a few shades lighter than the background color. Don't use a very high value for the spread, because this makes for a diffused shadow that does not work with most user interface designs. If you have multiple objects with drop shadows, check that they are oriented in a similar manner. Keep in mind that you are trying to simulate a scene with a light source. For example, if you have some objects with shadows on the bottom left and others with shadows on the top right, your eyes and brain will "reject" what they see, and what you create will not look visually appealing. And finally: Never, ever, place a drop shadow under text.
Try it Out:
- Go to websites that you consider beautiful. Deconstruct how they have used color, gradient, and drop shadows.
- Create a JavaFX application and place a circle on the stage.
- Select three color palettes from the color lovers' site, and use them in your application. (See Related Links.)
- Give the circle a drop shadow, then change the radius, offset coordinates, and spread variables a few times and observe the effect that these changes have.
Related Links:
- A Gradient Tutorial
- Color Picker
- Web 2.0 color palette (some popular colors in the Web 2.0 world)
- Color palettes galore
Maya Venkatraman
Sr. Interaction Designer, Oracle Corporation