Ask Ray!

In the second half of the 2008 fall semester the CFCC Web Master Christina Heikkila, working closley with Intelliresponse and many CFCC departments launched a natural language search interface for the CFCC website. In the planning stages it was decided that the search interface would have a unique CFCC branding that would feature the school mascot, Ray the Sea Devil.

The search engine would respond to natural questions like, “How do I apply?” or “How do I register for class?” and provide an answer from an extensive database of possible answers. Using the school mascot as a character that would “answer” the questions would hopefully create an environment that would be inviting, interactive and fun to use.

That’s where my contribution to the Ask Ray interface begins.

Immediately, I felt that a static image of the mascot would get boring. So, one of my first requirements for the layout was to include a random rotating image of the character in different poses and situations. I also felt that for the character’s dialog to make sense, the eventual answers would have to appear in a speech bubble like a comic book. There were other requirements and necessary elements that needed to exist in the layout. Adding to the challenge was the fact that CFCC’c current web template is relatively small.

The end result uses the CFCC two column template with some modifications and custom CSS. Also, there where going to be form elements overlapping the images, so the random images needed to live in the “background”. A clever little php randomizer chooses an image from a directory and serves the image to a background class in the CSS. This turned out to be fortunate. The search interface is hosted by Intelliresponse and I would have no access to the server making the additions to the gallery of Rays impossible.

Fortunately the randomizer serves the selected image to the style sheet and the style sheet is connected to the layout by an absolute link. The image array, php randomizer and style sheet could all live on CFCC’s webserver. I could add and remove Ray images at will.

I’d love to tell you I planned it his way. But it was just lucky.

A large portion of the work went into designing the mascot character Ray. I used mascot designs by CFCC’s Graphic Designer  Don Perkins and photos of the mascot costume at basketball games as my source.  I took liberty with the design, simplified the lines, and created a stylized “cartoon” version of the mascot. I filled my sketchbook with many renditions of the character. I then produced several illustrations of Ray in Adobe Illustrator and brought those into the source PSD of the layout as smart objects. Several export for web and devices later I had my background image array.

On slow days I work on additional Ray illustrations, continuously adding to the selection of random Rays.

Here is a screen shot of the layout and a sample of the Ray illustrations. You can see the page in action at

Cape Fear's proximity to the coast made a "Surfing Ray" obvious.
Cape Fear's proximity to the North Carolina coast made a "Surfing Ray" obvious.
Serveral Rays are used for the random background image
Several Rays are used for the random background image.
These pencil sketches live in my sketchbook The basket ball and volley ball sketch where drawn with my Wacom using a program called Sketchbook pro.
These pencil sketches live in my sketchbook The basket ball and volley ball sketch where drawn with my Wacom using a program called Sketchbook pro.