No doubt we been busy. And since returning back into Draftfcb KL, I’ve asked a lot if some of the processes we undertook was done well enough and if not, how to make them better.

What struck hard was how some things worked well on it’s own, but not with others. And even more, that some items were very much done the way traditional advertising agencies do. In a traditional world. With traditional tools. Like any traditional agency would.

But ‘traditional’ we’re not. We are in a state where most our campaigns will be centered around Digital. Or at least, have a digital component to it. So let’s move forward. Let’s take a step up. Because as much as we would like our clients to have the brevity to jump into digital, we as an agency should play the vanguard and be trailblazers in this world. Especially in the areas of ideas, tools and services.

Let’s face it. If we are to conceptualise digital solutions for clients, we should first be proponents of them. Why preach the merits of social media and power of the hive if we ourselves have not gotten wet with online collaboration tools and how these trigger user behaviours? I’ve faith some of you are using them already. But some is not enough. I’d like all of you to use it.

So in 2010, we will change how we do things. We will now be the hive. And leverage off the power of the others to create, conceptualise, ideate, design, produce, track, manage and deliver projects better.

Here are the online collaboration tools that I recommend you to use now on.

Your own Blog. Just like this one; brainiacsatwork.com

A blog does not have to be complex. It can be as simple as a image based portfolio site. As a digital creative, it would show the exact opposite of how good you are if your book is in the outdated portfolio case. A blog also shows that you are passionate about digital. You and I will never be a top notch blogger with millions of visitors. But having one shows that you understand how the basic ecosystem of social media works. It does not have to be self-hosted. There are many blog services out there. Blogger, Posterous and Tumblr are some top options.

Wordpress

There are many blog engines out there. I recommend Wordpress. It works for the most basic to the most advanced user. It can be a simple one image per page photo gallery (a portfolio site) or the media giants like CNN. Thousands of modules expand wordpress into a powerful social media engine. It connects to everything your digital content will ever need. Alternatives are MovableType, Joomla and Drupal.

Shared Online Calendar

This is a must for everyone in the team to use. Simple, easy and fast way to update staff movement and availability. So for team members not already subscribed to it, please do so.

ActiveCollab

So far, the best self-hosted Project Management and Tracking tool. This will be installed on the upcoming draftfcb.com.my website and will be central to all of our project creation, tracking and delivery activities. Clients will also be given access so all change requests can be listed and added on as tasks. Alternative to this is 37Signals Basecamp.

Box.net

Must use for file sharing between group members. One of the best and most simplest free file sharing services accessible via online or mobile. Each user get a free 2gb shared drive which probably won’t be used up if managed smartly. Folders can be private or shared and sharing can be control to groups or individuals. Group members can also collaborate in the management and file synchronisation. A log screen shows the activities that has taken place in files or folders. Alternative to this is dropbox.

DimDim

Web meeting and conferencing made easy and free. With screen and/or presentation sharing. As good as Skype with benefit that it does not require an account. Not a must but strongly recommended for virtual meetings.

Skype

Without doubt, the best web to web conferencing software. Now also with screen sharing so presentations can be shared to entire group. Drawback is that it requires a unique Skype login and some clients do not have these. However, this is a must for internal staff and members. Alternative is Windows Live Messenger and Yahoo Messenger.

TickSpot

Bonus! This is more reporting than collaboration. TickSpot is a very good way to update and enter your timesheets. Free for individuals. You create an account and enter from anywhere. When ready, export them into CSV format so these can be inserted into the Excel timesheet entry sheets. It’s the enter from anywhere that makes TickSpot a service that I use often.

Conclusion

So there you go. A full set of online and web services that can be immediately used to make 2010 a more productive year through better collaboration and ways to share ideas. In no way are the above services we will use from now onwards are the best in class but they are all hand-selected after comparing and using many of the alternative and or complementary options.

Are your photoshop cs4 colours different when u save documents as web?

If so, here’s a solution and some reasons behind this.

STEP BY STEP SOLUTION: (for those who don’t wanna know why)
http://www.usabilitypost.com/2008/07/30/photoshop-color-profiles-for-web-images/

Have a read on this if ur curious instead:
http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/

Have a good day designing with synchronized photoshop > web browsers colours.
Choose your colours wisely friends (:

Noticed taht in the top 10 websites, the design is focused on bringing the beauty of the content forward. Style is minimal, yet when doing so, it made the site so much more visually striking.

1. guardian.co.uk

2. BBC – Homepage

3. Wired News

4. UX Magazine – The User Experience Magazine

5. Vanity Fair: vanityfair.com

6. The New York Times

7. Frieze Magazine

8. New York City News Service

9. The New Yorker

10. CNN.com

11. National Gazette

12. TIME.com

13. The Morning News

14. Grand Sierra Magazine

15. Economist.com

16. JPG Magazine: Your World in Pictures

17. La Repubblica.it

18. Salient.org

19. FILE Magazine – Unexpected Photography.

20. Azure Magazine

21. art and design magazine

22. CREATIVEurope

23. washingtonpost.com

24. Archfarm: Non-periodical fascicles on architecture

…also worth a look…

25. Schematic.com

26. Creative And Live

27. Reform and Revolution

28. Slate Magazine

29. Peshku pa uje

30. Computerworld

If anything, these are our benchmarks that any web form design must meet.

Extracted and condensed are the survey results below.  Actual links (with nice graphical charts) to both parts of the survey follows right after.

Here it goes. Web Form Design Pattern Best Practices Part 1…

- “Sign Up” is most popular link title to form (40%)
- The header is the most popular place to put the link (59%)
- Placed at top right hand corner (76%)
- Simplified design when compared to page layouts (61%)
- Benefits of registration are presented next to form (41%)
- One-page forms (91%)
- Using bold to highlight title of input fields (62%)
- Right aligned labels closer to input fields (41%)
- Only 3 to 5 mandatory fields (50%)
- 6 to 8 mandatory fields (30%)
- Zero optional fields, only collected after sign-up is complete (62%)
- Less than 5 optional fields (98%)
- Vertically arranged forms (86%)
- Do not have asterisks* to indicate mandatory fields (78%)
- Progress indicator (9%)
- Simple web form with as little fields as possible (86%)
- Grouped and divided by white space (69%)
- Divided by borders (22%)

Web Form Design Pattern Best Practices Part 2…

- No hover, active, focus effects in use (84%)
- Static help support placed obviously next to input field (57%)
- No hints (33%)
- Error messages at the top – no fields highlighted (30%)
- Error messages highlighted at form fields – no top message (29%)
- Both top error message and error fields highlighted (25%)
- Real-time AJAX validation warning or error (22%)
- Colour Green used to indicate success, and Red to show failure (97%)
- Not necessary to ‘confirm email address’ by second input field (82%)
- Necessary to confirm password (72%)
- Captcha not in use (59%)
- Cancel button not used (92%)
- Left-aligned submit button (56%)
- After successful sign-up, load non-mandatory fields or tell friends (45%)
- After successful sign-up, recommend places to go or link to click (33%)
- After successful sign-up, basic thank you page with no extra links (4%)
- After successful sign-up, redirect to homepage (2%)
- Using tab indexes (99%)
- ‘System Talk’ tone and manner – Login, Password, Location (38%)
- ‘Business Talk’ tone and manner – Your name, Confirm Password (38%)
- ‘Conversational talk’ tone and manner – Tell us who you are, etc (22%)

Too much text! IToo much to read. Don’t understand. I know.

So here’s the link to both parts – Part 1, Part 2.

Skrin Amatur @murai.com.my is a online 1st Short Film Contest open to all Malaysians. Winners’ video will be screen in Kirana Channel, ASTRO. The main sponsor for this campaign is also FINAS. Winners will win a film training program and CASH. The TVC will be up around next week in every malay channel in ASTRO. Don’t miss it !!! Feel free to drop by at SKRIN AMATUR @ MURAI.

The Poster of Skrin Amatur.

Ejen Sinar is basically Sinar fm on-ground team. It’s similar to hitz.fm cruisers, Skuad ERA Avanza, mixfm Roadrunners, etc. We have came out with a fresh new look for their special page in sinar.fm where we have decided to use a comic look-and-feel for the whole section.

HERE IS THE NEW PAGE!

Like all retro comics, Ejen Sinar members have their secret identity or what they used to call, “alter-ego” and that’s when they become AMP Sinar X as a team of superheroes. Well, they are actually Sinar fm very own paintball team ;)

We haven’t officially introduced AMP Sinar X, but here’s a sneak peak of their page.

Stay tuned.

You can still view the previous Ejen page here, it’s not available to public anymore as of yesterday.

So, what do you guys think? :)

UI Design Pattern is a strong marriage of Information Architecture (IA) and User Interface (UI) turning a set of User Experience (UX) goal into simple intuitive interfaces.

Here is a collection of design pattern library from UI-Patterns.com. Great help for when designing intuitive next gen user interfaces.

“UI-Patterns.com are not the first to create a UI design library.
While other pattern collections are useful, they are far from coherent
and complete. The purpose of this site is over time to fill some of the
gaps – especially by providing code examples as to how how the
different patterns can be implemented: to join theory with practice.”

Input Feedback
The user have entered input into the system expects to receive feedback on the result of the submission.

Account Registration
You wish to know who the active user is in order to provide personalized content or opportunities to conduct a purchase.

Vote To Promote
The user wants to promote a specific piece of content in order to democratically help decide what content is more popular.

Lazy Registration
The user wants to immediately use you and try your website without conducting a formal registration beforehand.

Password Strength Meter
You want to make sure your user’s passwords a sufficiently strong in order to prevent malicious attacks.

Inline Help Box
The user needs an assistive introduction aside the interaction he is about to perform.

Tag Cloud
The user wants to browse content by popularity or most elaborate topic.

Tag
The user wants to find more data in the same category and/or contribute data in the same category.

Live Preview
The user wants to check how changes in form fields effect and end result as quickly as possible.

WYSIWYG
The user wants to add formatted text content, but does not have the know-how to write HTML.

Wiki
You want to provide the user the option of adding to- or editing information on a website.

Live Filter
The user wishes to specify a search by different categories to narrow down results.

Archive
The user wants to search for an article of interest by chronological order.

Pagination
The user needs to view a subset of sorted data that is not easily displayed on one page.

Continuous Scrolling
The user needs to view a subset of data that is not easily displayed on a single page.

Blank Slate
The user needs to get started and get a feel of how the application will feel when fully in function and filled with data.

Tip A Friend
The user wants to share something of interest with a peer.

Steps Left
The user is about to go through the process of filling in data over several steps and is in need of guidance.

Coupon
You want to attract your users to conduct a purchase of one of your products.

Subscription
The user wants to start a subscription of a service.

This time, into Smashing Magazine. Read full article here. Dive straight into point 5 – Hand Drawing Used Extensively and you’ll find his work among other greats.

Is it time for a Joshua-Rames collab on Brainiacs at Work skin design?

hitz.fm is the official station for Coldplay Live in London on June 16, 2008. Win an all expense paid trip for 2 to go watch Coldplay perform in London! This promo is to promote Coldplay concert in London and Coldplay ringtones from Hotlink.

http://www.astro.com.my/euro2008

After weeks of hard labor and sleepless nights (really!), we have finally launched the site for EUFA EURO 2008 on Stadium Astro. With our amazing google mashup for the team profiles and a couple of widgets to boot.

Dive head first into EURO 2008 with exclusive news, photos, videos and show your support by downloading games and other freebies on the site! Don’t forget our schedule widget and message board widget (coming soon), put it up on your blogs and spaces so you won’t miss a thing!

And if you’re stuck in the office with no television, don’t fret, we have live SIMULCAST of matches on the site including 10 exclusive matches only on STADIUM ASTRO.

This is the latest Xfresh.com theme. With a background themed by a local Malaysia comics illustrator. This follows through the site concept of enabling it to grow around different themes and styles.

This theme comes hot after the original launch theme. Just about a month ago.

Built on CSS, the site was a labour of love of resident design expert Jason Goh and content editor Raja Faradiana. Well done!

Those not in the know, a short history of Xfresh.com below.

Xfresh.com has been around since late 2000 and the community has been changing names and it has been refining it’s ‘community’ essence since then.

Xfresh.com year 2003

From “Xfresh Teen Community” to “Hitzfm Teen Community” to “Hitz.fm Teen Community” and finally it got its original name back in 2003.

Xfresh.com year 2004

It started off as a web community for teens and the whole website was in English. Now it has evolved into a full blown local music radio station whereby the language used in both the radio programming and the website is in Bahasa Malaysia.

Xfresh.com year 2005

From 2005 till late 2007. The site stayed with that look until this fresh update.

Stay tuned for more exciting stuff.