New CMS Web Design Projects

I was recently involved with two major projects that involved full Content Management System (CMS). The major challenge in the creation of these type of website is to be able to come up with a stable design structure that would complement the possible multiple contents that would be uploaded to the site. Here is where the concept of “content is king” is applicable. Below are screenshots and insights into our design process for MDIS Singapore and Nam Ho Travel.

Forecepts, the mobile and web development company here in Singapore where I have been working for the past 4 years was commissioned by MDIS. MDIS is one of the biggest private schools in Singapore. The design challenge that I need to address is to create a design that would be usable for all the different colleges. Frequent updates on courses, enrollment schedules, news and events are important information that needs to be considered in the design planning. As a full-CMS website, the client will have full access to all the content of the website. Keeping a simple design structure and using font colour and sizes as the main structure of the design have kept the website clean and beautiful, long after we have handed over the full maintenance of the website to our clients.

MDIS homepage

Another challenging client is the travel industry sector. These type of websites provides rich content and information on their latest travel packages, promotions, travel information and customer service plug-ins such as live chats and easy access to the travel agent’s contact information. The client wants to create a strong online presence, so our design solution is to create a memorable design that is easy to remember. The blue colour of their logo has been extensively used throughout the whole website. Big thumbnails have been used to highlight their travel packages. Travel packages have taken almost 85% of the space in the homepage. Secondary information has been placed at the right panel of the page to prevent clutter while still providing useful information to the users.

I’m happy and proud to have been part of the planning, wireframing and final design executions of Nam Ho Travel’s website. Nam Ho Travel is one of the major travel operators in Singapore.

 

Gingerbread House and Rabbits

Confectionery shops always appeal to me, its “deliciousness” arrest my design sensibilities. One fine afternoon in mid-November last year, I was scurrying along Orchard Road when my eyes were arrested by these delicious Christmas motifs from Marks & Spencer. Their biscuits and chocolate packaging designs are a feast for the eyes. I ran my hand on their glorious tin cans and an image of a gingerbread house caught my eye.

You can just imagine me standing there, staring at that tin box with all the intensity of a child whose eyes gazed upon a coveted dream toy. And that’s how the idea of a gingerbread house appeared before me.

I want to have fun with our Forecepts’ corporate Christmas eCards, so I created this simple, fun and quirky illustration of a gingerbread house. I added those four tiny birds flying up towards the top of the house carrying four Asian-inspired house accents. I have used curly Christmas trees in our last year’s Christmas eCard, I want to keep that as a “trademark”.  :P

Forecepts’ Christmas Gingerbread House: rendered as animated Flash electronic Card – http://forecepts.com/greetings/

Forecepts' Gingerbread House

Forecepts' Gingerbread House

The fun had not ended that  Christmas Season. I’m living in a country where people all get hyped up for Chinese New Year the same way that I used to get hyped up on Christmas Day when I was still a kid. My gingerbread house morphed into an eclectic mix of orange hues with pseudo-Chinese elements. And oh, the rabbits, they must be cute and at the same time, help to usher in a new year of prosperity. This time, we sent out Chinese New Year postcards to our clients.

Forecepts' Chinese New Year Postcard

Forecepts' Chinese New Year Postcard

Gingerbread:

The harder German-style Gingerbread is often used to build gingerbread houses similar to the “witch’s house” encountered by Hansel and Gretel. These houses, covered with a variety of candies and icing, are popular Christmas decoration [5] often built by children with the help of their parents. This form of Gingerbread houses is also popular in Norway. (Source:Wikipedia)

The Rabbit:

Cuddly, warm and affectionate are the attributes of the Rabbit. Mysterious and a great party-giver and host, the Rabbit enjoys being the centre of attention once in a while. The Rabbit is occasionally over cautious and can be a bit boring. He is also one of the luckiest signs in the Chinese Astrology chart.

Etre Bon Gallery and Academy

In a designer’s life, there are those rare moments when we stumble upon clients and projects that inspire us – projects that remind us why we are in this industry and why we love what we do. When this cosmic circumstance happened, a good design comes out of it: that is Etre Bon.

Etre Bon Gallery and Academy invited us to pitch a design for their web design and e-commerce project. Etre Bon is a sub-brand of Bon Café, which aims to teach and expose Singaporeans and residents to appreciate the art of coffee-making by conducting Coffee Journey Tours and Barista Workshops. As an exclusive agent in Singapore for selling Ascaso Dream Espresso Machines, the website is also targeted for online selling/ordering of this machine as well as barista tools.

etre bon illustrations

etre bon illustrations

In approaching the design for this project, I focused on this particular statement from their brochure. “JOURNEY FROM CROP TO CUP. It may appear to be simple, but behind every cup of coffee lies a stirring story.” The solution doesn’t involve any rocket science or philosophical art. The solution is simple: I just created a simple illustration of the “story of coffee”, focusing on the idea, from “crop” to “cup” and the processes involved in-between.

etrebon homepage

etrebon homepage

etrebon shop

etrebon shop

I used some of the elements from their branding such as the striped gray line on top of the rich, black background and added some small, hand illustrated icons on the section pages.

I created some burst of colour for the e-commerce page and enjoyed designing the rest of the styling for all the pages.

The programming team, especially Elliot and Ross, our flash guy extraordinaire, have done a great job in the execution of this project. I want to thank Xiong Zhou and Ian, for bringing us this gem of a client for us to work on.

Cheers to us! Or would I rather say, a cup of coffee for all of us!

SA Tours Singapore

From my point of view as a designer, I can say that SA Tours has been one of my favourite clients from my last year’s web design portfolio. SA Tours, or Sino-America Tours Corporation Pte Ltd (Singapore) belongs to one of the top travel agencies here in Singapore. Forecepts was commissioned to design and develop their new website and create some of their direct-marketing e-mail campaigns.

Design Inspiration:

I’m fascinated about http://www.lonelyplanet.com/ website structure, the richness of its content, the clean lines and the orderly fashion by which datas are presented in their site. So I’ll unabashedly admit that my design for SA Tours have been greatly influenced by this website.

Creating all the buttons and little icons have been a real treat for me.

A Crayon’s Life Is On CSS Mania

A Crayon’s Life is featured on CSS Mania last week, June 22.

Now let me tell you a little story on how A Crayon’s Life Version 2 was created.Crayon's Life On CSS Mania

Crayon’s Life On CSS Mania

Coming back to Singapore from my home in the Philippines last January has been one of the most difficult moments of my life. Returning from a one-month hiatus, fresh from your father’s funeral is not a very good way to start the year. They say that mourning has its own cycle and one has to go through the stages of anger, denial, acceptance and healing. I’m still lurking behind the denial stage and I did what I do best whenever I find myself balancing between grief, pain, loneliness and denial: I draw.

I tried to focus all my energy and concentration on getting things done. At the top of my list is my web re-design. On weekends, I shut myself up in my room to work on the illustrations. I have a regular day job and I only have one day per week to work on the drawings. There are also instances when I don’t feel like drawing, so it was only after about two months that I was able to complete the whole series of drawings.

I even have to rework on some of the illustrations because I was not satisfied with the initial results.

Finally, after 3 long months, A Crayon’s Life Version 2 was launched in the last week of May. I wanted to thank my friend and developer, Apple Ilagan for the long hours she had spent working on the back end programming of my site. She’s even the one person responsible for submitting my sites to different CSS gallery sites.

Only a week after A Crayon’s Life was featured in CSS Mania, I have seen “Crayosa” drift from one CSS gallery site to another.

Crayon's Life on Abduzeedo

Crayon's Life on Abduzeedo

 

Crayon's Life on 101bestwebsites.com

Crayon's Life on 101bestwebsites.com

 

Crayon's Life on WeLoveCSS

Crayon's Life on WeLoveCSS

 

A Crayon's Life On CSS Showcases

A Crayon's Life On CSS Showcases

Right now I’m still enjoying the euphoria from my “15 minutes of fame” (Andy Warhol), because I know that people will eventually forget about this site. I’m just plain happy that some people appreciate what we have done.

About my mourning cycle, I’m still lurking behind the stage of denial but the fact that I am now writing about it is a good sign that I’m now bordering on the “acceptance” stage. I know I have to brace myself, for I believe, this stage is the most painful.

For these gallery sites whose people behind them are kind enough to let Crayosa and the crayons drift into their webpages, I am most thankful  :)  CSS Mania, Abduzeedo, 101 Best Websites, CSS Showcases, and We Love CSS.