Visual Tweaks for Scooby 0.2

The first image 'zeroDot2LayoutV1.gif' is a proposed plan in which we're trying to stage the visual look for Scooby 0.2

• The size and look of the mock up is based on a 12" mac laptop screen: 1024x768, viewing on firefox browser.
• The current colors are based and sampled from the Chandler logo.
• In this mock up, I will be working closely with the Scooby team to see what is feasible for the release of Scooby 0.2.
• Note in the first mock up there is no left navigation (column) and in the last two mock ups, the left navigation is back in. The layout and ideas on the other mock ups are still ideas we're experimenting with and will be up for discussion on the design list.
• Based on the timeline for releasing 0.2, it is not going to be a dog-foodable release so not all the visual details in this mock up will make it in the released. See next image.

* zeroDot2LayoutV1.gif:

The second image 'zeroDot2LayoutV2.gif' is an example of what will be implemented for Scooby 0.2 based on the first mock up.

• zeroDot2LayoutV2.gif:
  

The specifics in the visuals are the following:

• Added a smaller Scooby logo - did not need to have the tag line 'web calendar' as the user is using the web application. It seemed redundant.
• Keeping an all white clean a bare bones of the look to the calendar. As we build on the application, the colors and polish may grow, but at this time it is not important to distract with color variations, 3D effects etc. Let's just have the right functions working first.
• Since the left column is currently implemented we're leaving it there for now. If there is no additional calendars then the left navigation/column will not appear. We intend to explore alternate design in which there is no left navigation (column). The left navigation (column) seem to take up lot of space especially if you include the event details (on the right column). There may be alternate ways to display or navigate to the features in the left column.
• New set of buttons for 'remove' and 'save' events.
• New set of calendar navigation buttons.
• Resizing handle.
• Lozenge color and style to match Chandler. Based on the lozenge explorations.
• Adding 'Noon' to create visual separation in the morning vs the afternoon. (Q. How will this impact different locales? Do most people understand Noon or are we just English-centric?)

Items which were addressed in the first mock up, but will not be able to make it into Scooby 0.2

• Left navigation (column) will still stay as it is.
• Lozenge gradient: there is a slight gradient in the lozenges so in the meantime they will be a flat color.
• Jump to date is taken out and is on the road map for later release.
• Timeline 'blue' color (on the left) to indicate working hours.
• Number of hours displayed on the canvas - currently the calendar displays 8AM to 2PM. It would be nice to view the full working hours 8AM-6PM. Though how to dispay event titles and the time within a half hour needs to be addressed.
• Fonts which are listed out on the visual guidelines for Chandler, there are issues in which fonts display differently on different platforms and browsers. Creating one font face may make it easier to predict how different browsers and OS will size/draw parts of the user interface. This may need to be reviewed on the list as this is not a concern for Chandler. In the meantime all the text is in verdana.
• Time on the left to align centered opposed to aligning to the top of the timeline in the calendar canvas.

Not intended for the release of Scooby 0.2.

The following are mock ups which we are experimenting on a few ideas.

• In this mock up, the idea of a task list and a scratch pad is presented. Where specifically it might fit in the layout may still be up for debate on the design list.
• A scratch pad is an area where a user can type in an event without knowing exactly where to place it yet. It's a good place when there are 'fuzzy' dates on events and one can keep it there similar to a 'stickie' until the user has confirmed a place as to where to put it on the calendar.
• The task list may list out all the items found in Chandler's task list. Though based on the target user, we will dertermine how much a user will interact (edit vs just viewing) with this list.

• 2.gif:
  

• In this mock up the mini calendar is added to the layout.

• 3.gif:
  

-- PriscillaChung - 26 May 2006