The new JavaFX controls were designed to be easily skinable so that you can create any look you can think up but we still need a default look that you get out of the box. The default skin that comes with JavaFX 1.2 is called Caspian which aims to be flexable and usable as is for a wide range of applications. I thought I would share a little about the design decisions I went through in designing Caspian.

The Requirements

  • Needs to work in many types of applications from product sites though strong branded corporate sites to sparkly web 2.0 sites.
  • Has to fit in and look in place on Windows, Mac, Mobile and TV
  • Must not look identifiably like any other look
  • Should complement the design of a application not over power it

The Technical Requirements

  • Need to be CSS themable so the designer/developer can customize it to fit into their product design
  • Vector based so that the controls look good even when scaled , rotating, animating etc.
  • Needs to be technically simple so that it is fast to render

The Color

  • Has to be gray to fit in with the current fashion and the widest range of products
  • Needs an accent color for important UI parts such as focused items and default buttons on a dialog where the user attention needs to be drawn
  • Has to work on wide range backgrounds


Initial Design

After experimenting with lots of designs and researching what other people are doing in the field here are the initial designs I did in Photoshop.

controls design 1

controls design 2

Example Window Design

Example Window Design

Testing on a extreme range of colors

Testing on a extreme range of colors

Hope you found that interesting the next few blogs on Caspian will cover how to style controls with CSS and how to make custom skins.