Nowadays, people love things to be done in second, like assemble your own furniture in minute – think of IKEA. Or, makes coffee drink with 3-in-One packing. Now, deliver a website with design and CMS engine ready – TemplateMonster.
Through this project, I realized that Thailand will be another new hub for GEW (Global Entrepreneur week) in Asia. So far, there was Gew Malaysia, Gew Indonesia etc. So I was going to work on this portal ‘Gew Thailand’.
After a few discussions with client and expected GEWThailand.com had to be ready as soon as possible due to a big event coming soon on November, so that client could start inviting partners and participants to register. Well, was it possible to be up and ready with design plus CMS engine running in 2 weeks time?
From pass experiences, most efficient way and make things easier, preferable towards those ready templates such as TemplateMonster.com. Another issue was about which platform to be used? Since GEWThailand’s contents were not comprehensive. Well, personally still prefer WordPress rather than Joomla or Drupal. Coz I found it much more user friendly for clients.
Picked a few templates, which personally think it was suitable for GEWThailand structure such as Events listing, feature articles etc. After clients glanced through and gave some explanation, and quickly make decision and go ahead for the purchase.
After familiar with the template, found out few missing part such as events listing has to be customized and other minor modification on the original template. Luckily managed to get some helps from our internal developer who was quite experience in WordPress.
Week 1, pick the template and run on the hosting sites. Manage the contents and such as new menus, new slider.
Week 2, customized the events listing and registration form which based on Joget Workflow instead of putting efforts on the existing wordpress form wizard. Touched up the final contents and files, finally it has ready to showcase.
So, what was exactly my task? To complete the mission I have to be a Designer, Project Manager, Web Master and Quality Controller!
So far, I’d done few videos for Joget Workflow but this time to produce a video with VO (voice over) plus smooth animation; it was kind of new to attempt it.
Few weeks back, I’d posted about the leaflet design for ‘Simplify your business’ earlier, continue the efforts to get ready a 2 minutes video before Demo Spring, while the team members were heading to US, I’d estimated my time for 2 weeks of production.
Firstly, I’d been through the scripts with the team many times, easily more than 6, 7 times to rewrite the storyboard outlines. With such a short presentation, not to make things long ‘winded’, it was more challenge than 20 minutes storyboard.
After few rounds of cutting down the words here and there, finally we had a ‘Stream-down’ version. Based on the scripts, I was able to draft out the storyboard in frames format.
Well, time was clocking and decided to use Adobe Flash to produce these 2 minutes animation. Putting some efforts with the effects, but later my designer has encountered a major problem while exporting the video directly from Flash to AVI.
After exporting to AVI, we realized the animations were not smooth and the frames were missing. Because Adobe Flash using capture screen method to render video, and once it was a fast frame per second, complicated effect will be wiped out. One of the weaknesses in Adobe Flash, the video’s output (AVI) has the scene with “Jumped Frame”. Other than that, AVI file size was large; it was ridiculous for a 2 minutes video with 400mb over file size!
In fact, we had put so much time and efforts; definitely not a good idea to use something else beside Flash. Searching through Google and finally found a solution to solve the lacking.
Moyea SWF to Video Converter Pro is one of the best SWF to AVI Converters that can interactively convert flash to AVI with 32-bit RGBA transparency and Alpha Channel. Furthermore, the file size was much smaller compare to AVI or Quick-time.
And I recommended it due to the output format and file size was pretty acceptable.
Come to VO (voice over), Jack has proposed to use something FREE from AT&T Labs Natural Voice. It’s a Text to voice software. Well, demo so what you expected! The sound was not ‘natural’ and very robotic.
However, I’d been digging and trying some ‘Text to Voice’ software from the net, finally I found NaturalReader (www.naturalreaders.com). Good stuff always has to pay the price! Nothing is free if you need something better.
It has nice interface with simple button to export wav or mp3 format. And there was a speed control as well.
After I’d output the voice over. Some of the final adjustment has to be done in Flash again; need to be re-adjusting time frame so that it synchronized with the animation.
Here’s the final results posted into Youtube.
Come across this KLIMS – Kuala Lumpur International Motor shows (www.klims10.com) had over since December, and it was one of
the biggest event I’d been to in year 2010.
Thanks to Joe’s wife who are the main organizer (www.interexpo-my.com) for this event and managed to get a Press Pass. Not a free entrance tickets but a pass allowed you to zig-zag in the events which pretty fun and allow me to flexible moving around.
Well, KLIMS not just about cars (static model) but live models. Honestly, the last show I went was year 2006 and it was bigger and more things to see. I had predicted what is going on for this year and most of the cars were not my main target.
Bumble bee?
How about Bumble bee’s model? Ha, definitely the live models were much more interesting than the still models.
Obviously my aim for this trip, not for the cars… it’s all about the beautiful and elegant models that I wanted to captured for.
See more pictures from creadaq.com
Joget (www.joget.org) has operated smoothly and it has its own plug-ins and packages to be downloaded, some of them were free and some requested small tokens. To reduce time to redesign a new shopping cart or developing new module, team has decided to use Open source platform for E-commerce.
There are many E-commerce platforms to be used for FREE, but Magento (www.magentocommerce.com) was suggested by Tiensoon our technical Jogetian. Since it was recommended and familiar with it, but it was first time for me to understand a totally new E-commerce solution within 2-3 days.
Firstly, found a few free Magento templates. And redesign and try changing colors.
Unfortunately, the coding and some other elements were not fit into the version we have downloaded. I have no choice and using the original template and modified the CSS and images.
Well, surprisingly it turned out quite good with the Joget color schemes. Took around 7-8 days and Joget Marketplace has officially launched.
It was more than 5 years never updated much on my website – johncreative.com. Portfolio was outdated, style sheet was old etc. Designer has lot of excuses for some reason, not to work or spend time on their own design; for myself I was too tight up with works.
So what has motivated me to revamp it; surprisingly I was ‘stir-up’ by this font type — Harabara (http://www.dafont.com/harabara.font).
First in my though: “Ok, cool… let use it for my site!”
Furthermore, it was quite common to have one page business card as design theme; apparently, quite number of designers had done it such a way especially things were everywhere – Networks of Facebook, Twitter etc. (5 years ago don’t even have twitter!)
Finally, took me one night to put all icons together and fit with the nice background images. Nuthing fancy about, next stage will working on portfolio page…hopefully.
If you looking for web design resources or references, I have these blogs to share with; it was like a main hub of information not just about web design, but photography, CSS coding etc.
So far, there’s many blogs and forum you can search and try to dig great stuffs. Well, I have “Filtered” them, and here I have 6 blogs provide great inspiration and ideas for my works.
Recently I was setting up a website for my church (PKCMC); and decided to signup the hosting package from 3ix (www.3iX.org) which only cost RM146 for 2 years.
One of the reasons I pick 3iX was because it has this “Fantastico”, Fantastico (wikipedia) is a commercial script library that automates the installation of web applications to a website. And wordpress is one of the features that had ready.
After installing and looked simple till I realized something not right when using Chinese Character and it display “?????”; well, I don’t have this problems on other blog (creadaq.wordpress.com). Searching through google and found out there were many type of answers.
Most commons from WordPress Support, however, it doesn’t help and I keep on looking at some blog with the same file (wp-config.php) which it have this code…
define(‘DB_CHARSET’, ‘utf8′);
define(‘DB_COLLATE’, ”);
But it was working fine. So, don’t remove or replace it. It might corrupt your WP database.
Then I found out some resources about SQL database setting for WP. The main issue is that for most systems when you create a database, the collation is set at “latin1_swedish_ci” as default. You’ll need to change that to “utf8_unicode_ci” for all the tables where you plan to include Chinese characters in.
If you have cPanel, try look for mySQL Database or PhpMyAdmin
Well, first I though it was changed by just select it from the drop down. NO! There was many more to be done. Let me show the steps and screens. Please click screen to enlarge.
You’ll see something like this, might defer from yours as some plugins will add their own tables.
Anyway, on this screen, under the “collation” column, if you see latin1_swedish_ci, you’ll need to change that to utf8_unicode_ci!!! Click on the button 2nd from left on the column that says “Action”.
You’ll reach a page that says Structure as shown below, check everything that says latin1_swedish_ci, then click on the edit button which looks like a pencil.
You’ll reach another page like the one above, change everything to utf8_unicode_ci, then click Save.
Then, when you finished saving, go to the tab that says “Operations”.
Change again setting to utf8_unicode_ci, then press “Go”.
Repeat steps for all that are not “utf8_unicode_ci”. Make sure you click each of the list on the left menu.
Finally, you should be able to write in Chinese characters now. See pkcmc.org.
I think 2009 is the year of Twitter, it was hot and everyone has owned one account. Even our Malaysian PM- Najib has one, wonder what has he used it for, calendaring or his though of twitting it. Well, I was not interested to be his “follower”. 
And surprisingly, I have seen some of them come with million followers. Anyhow, people has engaged it and realize there were some designers have created some beautiful icons and buttons for twitter, especially the Blue bird. Just lovin them all…
So, there were some nice twitter icons for downloads.
Choosing the right colors for your web design is a decision that should not be taken lightly. Color is the first thing viewers notice on a webpage. It can evoke a variety of strong emotional reactions and each color can contain a different association. Although everyone’s experience and taste can vary greatly, there are still some basic tenants one can follow when working with color:
Consistency
This applies not only to font and background color, but also to the images and other cursory elements. It would be awkward to have a black and white image on a site full of bright, colorful backgrounds. It is typically best to choose colors that go along with the company branding and it is important that the brand identity seamlessly fits into the design. Also, limiting the design to just a few main colors—2 or 3 main colors and 1 or 2 accent colors—is usually a good standard and helps to maintain the consistency. Too many colors can cause your design to become erratic and visually confusing to the viewer.
Contrast
If you use colored copy, make sure that it contrasts well with the background to be easily legible. Stark color contrast is a powerful tool and can draw the eye, so make sure the most important elements have the most contrast in the design. Having muted colors for your title copy and a bright bold color for the body would be a poor use of contrast, applying viewer focus to the wrong element.
Complements
Complementary color choices are also extremely important. And it’s not just the literal complementary colors that are key, but also colors that complement each other as an accent or highlight. There are many different types of color balances and every designer should be very familiar with color theory and its impact on design. Well, I suggest you can use some online tools such as Kuler Adobe (kuler.adobe.com) to deal with the best combination.
Sometime keep one-two colors . Less color which easy to manage the content and contrast of the branding.
Color Theory
Some designers feel that it is enough to just have a feel for the right colors and that color theory is unnecessary. While having a good eye for color can certainly help develop a good design, color theory is still important. It is important to know what types of emotions your colors will convey so that you cater to your target audience. Click here for more information on color theory. See Color Theory from ColorJack (www.colorjack.com).
Since when I was engaging with twitter, thanks to my old friend KCtang recommended. It was a great tool and so many people was engage with it, “have you twit lately?” soon it become a habit and you might feel uncomfortable if you don’t twit. Oh no! I think it was different type of “Bird-flu” spreading so fast….
Recently I realize some of user has done great design to personalize their designs on twitter. There has already been a range of quality designs showcased on various sites, which has shown an emergence of trends such as the ‘sidebar’. Let’s take a look at some of the best practices around Twitter background design and get to work creating our own.
There were 3 different types of background approach:
1) Using repeating background pattern
http://twitter.com/daniesq, http://twitter.com/msphotogirl and more
2) Background Graphic fading to background color
http://twitter.com/bittbox, http://twitter.com/GordyMac/ and more
3) Extra Large Background Graphic
http://twitter.com/ijustine, http://twitter.com/betterinpink and more
However, you could also get some customize background or template that provided by twitter, http://www.twitip.com/custom-twitter-backgrounds/
Personally I prefer 2nd approach that background graphic fading to the background. Using a single graphic on your profile can help add some visual interest. And it load much faster with less graphics. Let’s start to do my own background on my Sidebar!
First of all, click on profile setting and go to “Change design colors”. Well, brown is always my first choice, change the tone from background, links, text etc. Immediately you can preview the colors from screen. Save the settings once you have decided.
Once I have done that, I get the measurement which is width 460 and height 600; copy the exact background color and start my own theme.
First thing in my mind – Top view on my sidebar; it was easier to arrange my elements such as paper, camera and most familiar’s top view – a cup of coffee.
Just find some of the picture from Google images. Or royalty free images from Stock.xchng (http://www.sxc.hu/)
For example, nice quality of Pencil – http://www.remarkable.co.uk/downloads/wooden_pencil.jpg
Then, rotating and reshape my “ingredient” on PS (sound like frying and cooking, yeah!). Used a lot of drop shadow and simple effects such as rotate and wrap the graphics. Other than that, it was quite straight forward.
Once I have done that and save in JPEG, go back to the settings and click on “Change background images”. Browse and save changes. Done!
Take a look at http://twitter.com/twentyplus
