Caty's Blog » Design

Latest work: Easter theme

Caty — Thu, 18 Mar 2010 02:37:50 +0000

Just finished my latest Easter theme here:

Webshop v5.5 by Dandomain

Caty — Fri, 03 Jul 2009 08:38:31 +0000

I have been working on DanDomain Webshop software as early as Feb this year and as the project is drawing nearer to an end, just thinking to leave some thoughts here as compare with Zen cart and osCommerce.

Before I start, I would like to emphasize that this is solely based on the view point of a designer regarding the template system and not on a standpoint of an owner. Why would I say so? Well, for owner or anyone else who wish to open a webshop and start selling right away, webshop v5.5 is a good start, simply because the ease of use as most of the settings are controlled in the admin panel. There are a number of default templates and styles that one can set easily with very little knowledge of html programming. As far as I can see, this webshop is rather popular with its Danish clients.

But on a designer point of view, it is really a pain in terms of programming and setting up custom templates here and there. As I mentioned earlier, most settings, including templates, css styles and add-on modules has to be done via admin panel. The codes are pretty messy as the system auto-inserts quite a number of redundant codes which in returns, designer will need to find ways to "hide" it in order not to disrupt with the intended design. An example is that many non-semantic "" tags are added un-neccessary here and there and therefore efforts need to be taken if a block level element is required here, either by changing its’ default display property with css or doing a small "hack" of "un-span" and "re-span" later in between the block level elements that one intend to insert.

In addition, this system is "table" codes based and hence messy nested table are seen every where. I have to close one eye on my developer tool "HTML tidy" sitting right at the bottom of Firefox window where warnings statistics show up with a flying color. To name a few: "" and "" tags can appear in the middle of some content pages, styles declared inside elements etc..

Finally I survive through the design and implementation phases by significantly lowering down my expectation towards producing a design that passes W3C validation with warning and error free. And most of all, with great patience. Giving me a choice, Zen-cart is still my preferred option so far.

jQuery plugins

Caty — Thu, 12 Mar 2009 03:37:34 +0000

We have been hearing a lot about jQuery plugins in the recent years and here I compile a list of them for self-reference, hopefully it will be useful for some of you. For those who are new to jQuery, you might ask:

What is jQuery?

Extracted from the official home of jQuery.com:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Let’s go straight to explore the cool plugins now…

1. Accordion

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. Read more »

2. jQuery Menu

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want; Read more »

3. Superfish: Suckerfish-style menu

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript). Read more »

4. Cool animated navigation menu

A cool animated menu built with css and jQuery. Read more »

5. JQZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework. It uses script to magnify what you want. Read more »

6. Smooth Div Scroll

Smooth Div Scroll is a jQuery plugin that scrolls content left or right which does not limit the scroling to distinct steps. Scrolling is smooth and there are no visible buttons or links since the scrolling is done using hotspots within the scrollable area. Read more »

7. jQuery lightBox plugin

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector. Read more »

8. BeautyTips

BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec in order to dynamically draw tooltips (sometimes called “talk bubbles” or “help balloons”) associated with a html element on the page. These tips are highly configurable and can be triggered in many different ways. Read more »

9. jCountdown

Creates a visual countdown timer of days, hours, minutes and seconds till the provided date. Read more »

10. Animated Hover

Animated Hover is a plugin for jQuery to create animated hover effects. Read more »

11. jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation). Read more »

12. iconDock

iconDock is a jQuery JavaScript library plugin that allows you to create a menu on your web like the Mac OS X operating system dock effect one. It is based on the Google X menu, an approach that Google did to create this effect on the web. Read more »

13. Accessible News Slider

Accessible News Slider is a JavaScript plugin built for the jQuery library. Read more »

14. Slide out and drawer effect

Slide out and drawer effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks. Read more »

15. News ticker (BBC style)

News ticker in the style of that used on the BBC news site. See Demo »

There are still tons of great jQuery plugins out there. Simply google it and you’ll see what I mean.

And now, last but not least, here is a great tutorial about jQuery Sequential List, a good example to make use of jQuery. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. Read more »

Caty Design Studio in “25 Hot Female Web Designers” list

Caty — Wed, 29 Oct 2008 05:25:18 +0000

Caty Design Studio is in the list of 25 Hot Female Web Designers which is compiled by Lee Munroe, a freelance web designer from Ireland. Check out the post for links to the list of other fantastic female designers there.

Site featured on galleries..

Caty — Thu, 14 Aug 2008 01:52:22 +0000

Thought of consolidating all related posts of Caty’s blog being featured on various galleries to only a post. Therefore this post is constantly being updated from now on..

27th Jan 2009: Caty’s Blog is featured on CssGlance.

6th Sept 2008: Caty’s Blog is featured on CssImpress.

3rd Aug 2008: Caty’s Blog is featured on Css.WeAreTheBuzz.

24th June 2008: Caty’s Blog is featured on Designer Source.

13th June 2008: Caty’s Blog is featured on CssBag.

8th May 2008: Caty’s Blog is featured on Smashing Magazine.

23rd April 2008: Caty’s Blog is featured on Css Loggia.

10th April 2008: Caty’s Blog is featured on Css Cream.

10th April 2008: Caty’s Blog is featured on CSS Design Yorkshire.

24th Feb 2008: Caty’s Blog is featured on

Simone Legno live art demo at Singapore Toy and Comic Convention

Caty — Tue, 01 Jul 2008 05:25:59 +0000

I went back to STCC on Sunday to catch a glimpse of Tokidoki designer Simone Legno performing his live art demo here. Would like to share this video with all the tokidoki fan out there. Cheers!

Or watch this video in You Tube

More pictures from the live art demo…

The almost completed art work.

Simone showed off his pride work.

The completed art work on display!

Here wraps up everything about the Tokidoki designer at STCC 2008. My vinyl toys collection coming up in next post, stay tune..

Singapore Toy & Comic Convention 2008 Part 2

Caty — Mon, 30 Jun 2008 06:37:44 +0000

Next were the pictures taken from Devilrobots, a design team of five from Japan which led by the art director Shinichiro Katai.

Devilrobots specializes in graphics and character designs and the most popular character of their is To-Fu Oyako as shown in pictures below.

The front left is the To-Fu for Tokidoki.

An adorable 16" Gum To-Fu.

What a colorful wall of Devilrobots creation.

There are some other toys by Devilrobots which I have seen from other booths as shown below.

Next was the comic artist Gary Erskine from UK.

Madcap is a platform devoted to aritstic conception and collectable objsects.

Pictures from the various booths at the hall.

More toys collection..

Well, come to the end of the STCC. Although I have still tons of photos in my collection but would not be possible to show them all here. Anyway, there will be another post of Tokidoki Live Art Demo by Simone Legno, stay tune to my blog.

Singapore Toy & Comic Convention 2008

Caty — Sun, 29 Jun 2008 02:44:10 +0000

The first-ever Singapore Toy & Comic Convention 2008(STCC) was here from 27th to 29th June 2008. This was also the first international event of its kind in Southeast Asia to showcase the latest pop-culture trends in design, toys, comics, animation and gaming. I went down there on Saturday afternoon and snapped tons of photos from Tokidoki by Simone Legno and others e.g Devilrobots, Nintendo, BANDAI, Hasbro, Wizards of the Coast, Medicom Toy, Toumart, Madcap and more.

When I reached the entrance of the convention hall, I was first greeted by an Artist Graffiti Wall which was the collaborative artwork by artists which include my all time favorite Simone Legno(Tokidoki), Pete Fowler, Gary Erskine, Mori Chack, Kika and Nada, Devilrobots, Touma and more!
You can read more details about the designers at the Walk of Fame.

So, the first booth that I went to was of course the Tokidoki booth where sales of tee-shirt, necklaces, earings, caps and uchiwa were available.

I bought a bunch of vinly toys to display at my home, ounch, my wallet was “injured”!

Time for Simone’s autograph signing session.

Here was his completed sketch, for me.

Reaching the end of Tokidoki session from my photo album. There was one of the vinyl toy by Tokidoki was seen at Devilrobot’s booth, so will include that in the next section. I will probably put up another post of my vinyl figures collection in a later date.

Part 2: STCC 2008 The Devilrobots “mission” and others to be continued…

Zen Cart vs osCommerce

Caty — Wed, 18 Jun 2008 11:09:00 +0000

I am currently working on Zen Cart projects and thought of leaving some views after working on several osCommerce designs before. This review is solely based on the view point of a designer regarding the template systems on both e-commerce softwares. So which is better, Zen cart or osCommerce?

Talking about the dreaded “Table” coding, Zen cart has moved away from this since version 1.3.5(well – nearly table-less layout). osCommerce is table-based and codes are pretty messy(to me) where I had to mix around with table and css based div.

Another feature that I like is the template overrides system in Zen cart: you can customize your cart by creating your own custom template folder instead of writing to the default templates and thus any future upgrades will not overwrite the customized theme design. See snapshot below.

With osCommerce, there were several projects that I need to edit over 100 files manually just to integrate my design into the modified templates. That was indeed a tedious task editing all those pages manually even though I did use the “Find and Replace” feature from Dreamweaver.

At the point of writting, I would say that I prefer Zen cart over osCommerce in terms of ease of the template customization. Will post further findings after I have completed and uploaded the new Zen cart designs later.

More resources:

Creative inspiration: Simone Legno

Caty — Thu, 29 May 2008 03:27:47 +0000

I am so excited when I stumble upon these creative inspiration videos featuring Tokidoki designer Simone Legno. There are 3 free videos on site and I especially like the one where “Lynda sits down with Simone”, talking about his background, how he started sketching and the branding of Tokidoki, advices for people who want to get into design industry and more. The next video will bring you into Simone’s Sketchbook where he sketches one of his famous character "Sandy". I am really tempted to signup at Lynda.com in order to view the rest of the online exclusive videos as they are only available for the paying subscribers.