February 4th, 2010
Version 3.6 of GUI Design Studio included a new element for creating Calendar controls.
When we started designing this feature, we looked around for examples of different calendars in desktop and web applications. We found a wide range of different designs; some with one month, some with 3 or 4, some highlighting “todayâ€, others highlighting a particular day or a range of days. Of course, each application had quite a different visual design to its calendars as well.
In the past, we’ve tried to simplify elements and minimize the number of settings and options they have but, with this new element, we felt we had to provide for the increasing demand on design flexibility.
The problem, as all of you designers of great user interfaces will know, is that with flexibility comes complexity. We didn’t want to give you a tool which is hard to learn or slow to use because it has so many options and special cases, but we did want to give you a tool which will let you create the calendar design you need, quickly and simply.
That was the aim.
We’ve ended up with eleven different areas or labels. There is the Main Control background to the element, the Title Box, an optional Week Numbers column, a Week Day Names and Weekend Names title row (weekends don’t have to be different from week days, but they can if you like).
Then there are the Week Days and Weekends that appear in the calendar body. You can choose to display the Trailing Days in a month (these are the days from the previous month that make up the first week of the current month, and the days of the next month which complete the final week).
Finally there are the specially highlighted days; Today Highlight, Selected Day and (because selected days can be in the trailing period) the Selected Trailing.
Each of these needs a colour for the background (Fill), the Border and the Text. That is 33 different colours!
Here’s what the ‘Colours’ property panel looks like:
And that’s before we even start talking about the options to specify what parts of the calendar should be included, cell sizes and spacing and various other controls.
Actually, we could have gone further. While trying to replicate some of the designs we came across, we found the need for even finer control over some of the colour and layout parameters. But there comes a point when you need to say ‘enough is enough’ and compromise between total flexibility and usability.
Clever use of the different colours and the various borders and spacing between the elements allows you to create an incredibly wide variety of calendar designs.
You’ll find a small gallery of some of the possible designs below. The top one’s from Windows XP but the rest of the examples are loosely based on calendar designs from around the Web, including Google and a range of examples highlighted in Antonio Lupetti’s blog post on “Beautiful datepickers and calendars for web developersâ€.
So, what do you think? Did we provide enough styling options, or too many?
We think we’ve got the balance just about right, but we’re happy to hear your opinion too. We’d also love to showcase your own beautiful calendar. If you have a design you’d like to share, or something to say about the new element, why not post a comment?
Enjoy your GUI Design Studio Calendars!
Nice. They all appear to be in a grid layout. Do you offer any other layout designs?