The project was aimed to facilitate public dialogue among Malaysians and provide policy input to the Malaysian government on how to advance democracy and human rights in the areas of good governance, anti-corruption, minority and women’s rights and religious tolerance.

It took place throughout 2009 all around Malaysia with various events and initiatives such as public forums on Islam and Democracy, publications on advancing Islam and Democracy, government roundtable on advancing Islam and Democracy, and advocacy workshops for stakeholders

NDID Official Website

NDID, launched in November 2009

We were thrilled to be given the opportunity to work with the wonderful team at CPPS on this website. The NDID website was officially launched in November 2009 and served to aid the participants and resource persons who are involved in the project and to the general public who are interested in this initiative.

The website will serve as an informational platform till end of this year (2010)

Live URL: http://ndid.org.my

The Creative Process

Content & Site Architecture
Prior to starting any project, we would make sure the client provides us with all the necessary content, resources and pictures. Once they are obtained, we would work on the site architecture of the website. This process is very important to determine the efficiency of the website’s information and navigation flow.

For NDID, the site architecture is pretty straight forward since it’s an informational / ‘brochure’ type of website. We identified the important content that needed to be emphasized, discussed the information flow with CPPS and got it approved right away!

Wireframing
The process of wireframing comes next where in this stage, the information and navigation elements were structured into a layout that will serve as the basic structure of NDID website. A website wireframe typically involves mockup text, image placeholders and boxes to illustrate the website structure

NDID Frontpage Wireframe

Design Process
Before we started beautifying the wireframe to create the web design for NDID, we came up with a moodboard which basically include design ideas for the website – this involves the typography, color scheme and various design elements. It is good to create a moodboard before proceeding to the actual design process so you’ll have solid references to guide you into designing the website

Moodboard, photos via flickr and corbis

Rationale of our Concept Design
When Nadiah (@nadsulaiman, our Creative Director) first got the project brief for NDID, she straight away imagined the website to be something that is different from many other Islamic-related designs. A typical Islamic related design would include green in the color scheme, and patterns and ornaments inspired by decorations in a mosque

Nadiah proposed to go with a design that’s more edgy and bold to deliver the message of the website with a strong thrust. With a dark and solid color scheme, she went for black and red as the primary colors followed by grey and white for secondary colors. In terms of typography and visual theme, she went for a style that is minimalist and elegant.

“I love how clean and crisp it looks, I like the font usage, I also love how it’s not typical green when it’s associated with Islam”

- Project Manager from TAF

Nadiah nailed it! After a couple of revisions that you’ll see below, we finally settled for the final design that you see on the live site

Design Concepts for NDID

The Development Process

What comes next is the most exciting part in website development! At this stage, the design concepts will be converted into HTML templates before being deployed on the CMS engine.

Design to HTML/CSS Conversion
Although a design such as NDID’s is a no-brainer to convert to HTML, we must ensure that the HTML markup and CSS are well structured and efficiently composed to ease changes and fixes during the later stages of development.

At this point, making sure both HTML and CSS for all templates are W3C validated is important to lessen bugs during development.

You can view NDID HTML templates here

* Tip – all our HTML templates use real content (if available and made-ready by the client). If content isn’t available, we use @teamkureno’s Lorem Ipsum tool for quick ‘fake/mockup’ content. Using real content and making your HTML templates work like a real website is handy during progress review with clients

WordPress Integration
We needed a CMS that would be easy for clients to use with minimal learning curve. We also needed a CMS that can effectively manage static pages, posts (for Latest News section), images and downloads. WordPress meets all the requirements and thus, we selected it to power NDID’s website.

Note – I would love to share the detailed process we took in creating the NDID WordPress theme and setting up the content and plugins required to make the website but that would probably need a whole post on its own! Follow us on @bitter_coffee because we might post something like that on bitco-labs

On top of that, we also made a custom configuration page in the backend so our client could easily change selected content and settings of the website.

Custom Theme options for NDID

That’s a wrap!

That wraps up the processes involved in creating NDID’s website. I hope you’ve enjoyed reading this post. Don’t forget to follow us on @bitter_coffee and be a fan of us on Facebook

We are in the midst of doing a slight realign of our website and also launching our community web project codenamed bitco-labs soon. You can read about them here

Bitter-Coffee v2.1: Re-aligned

Change is inevitable – except from a vending machine.  - Robert C. Gallagher (photo via ffffound)

BCv2 received an overwhelming response from our peers in the design industry, thank you so much for your support. Over the past 8 months, we were featured in some CSS galleries, design blogs and recently, Nadiah enrolled our site into 37signals’ Sortfolio, (previously known as Haystack) which is a worldwide web designers directory – we are listed under Malaysia web agencies.

Despite the great feedback, we still feel there is something missing with the overall design which is why this re-align needs to be done, hopefully by end of May soon.

So mark your calendars and follow us on Facebook or Twitter to grab the latest scoops

Reaching out to bitco-friends

Social media is booming and we didn’t want to miss the bandwagon but we did a terrible mistake by hooking our FB to our Twitter. It’s almost as good as not having a Twitter account at all, right?

Reaching out to people via Facebook and Twitter is different. Both platforms have their unique purpose, positioning, and functionality.

So this is the second change we will embark on in the next few months

• Separating Twitter & Facebook content
• Reach out more to bitco-friends
• Form relationships with more industry peers using social media

Giving back to the community

We’ve had this idea for awhile now but we’re really going to make it happen this time. If you have been following us since our humble start, we had a blog where each week we gave out design freebies and tutorials. And we wanted to continue that effort on BCv2, unfortunately since work has been too overwhelming for us (Alhamdulillah) – we couldn’t make the time to blog.

Check out our drafts!

• Using Google Chrome for Web Development
• 5 Web Design Myths You Have To Know
• Top 10 Gorgeous & FREE Twitter Icons
• SCREENCAST: The Edge Malaysia: Easy CSS & Design Elements Customization via Joomla Admin
• SERIES: Developing The Edge Malaysia: Mobile Site

I guess one of the problems with blogging that it requires discipline so salute to all the wonderful design bloggers out there. I’d like to give a special shoutout to Jad Limcaco, the creator and author of one of the newest but already so popular design blog, Design Informer. I witnessed the birth of Design Informer and I watched it grew into such an amazing and respectable design blogs around. Jad is one inspiring dude! He constantly comes up with design tweaks and new features to improve Design Informer.

So, since blogging will not be working too well for us, we’ve come up with another community project which we’ll call: bitco-labs aka Bitter-Coffee @ LABS

So what’s Bitter-Coffee @ LABS all about

Basically it’s a subsidiary of the main Bitter-Coffee brand. It will be a community project and collaboration amongst the existing Bitter-Coffee team and also 1-2 hand-picked, potential passionate designers & developers whom we will invite personally

Under bitco-labs, we will be doing various experiments on web stuff – imagine things from development stuffs like HTML5, CSS(3), PHP, JS Frameworks like jQuery, Dojo, Mootools, WordPress, even Flash and also design stuffs like typography, infographics, colors/styles, illustrations and basically everything under the hood of web design & dev – and we will be sharing the knowledge we gain from each experiment with the community

The objectives of this project is to

• Keep up with the constant changes in web design & development technologies
• Learn new things everyday and compile them in a place where we can go back and refresh our minds
• Share the knowledge we have with people all across the websphere

In the future, we also have visions to get bitco-labs & its collaborators to do installations & applications showcase at design events & conferences.

That’s a wrap!

So that wraps up the upcoming changes you will see around our website soon. We’re excited and we hope you are too!

We have another blog post coming up soon about a recent web gig that we finished for a client so watch out for that! In the meantime, don’t forget to follow us on Facebook or Twitter

We’d love to hear any feedback too, so don’t be shy to share your thoughts

PBT rebrand!

To welcome 2010 which is just around the corner, PBT wants a full-fledge rebranding of their web presence. Their old website was indeed jam-packed with the necessary information that their existing and potential clients would need but it’s lacking the visual appeal, functionality, information structure and not developed with web standards.

And we were very delighted to be chosen by them to design and develop their new website.

New Landing Page

While the website is still under development, we made a proposal to come up with a new landing page for their website. We came up with a simple landing page that has a general overview of who they are and what they do. We also gave the landing page a fresh look and feel to build anticipation for the upcoming website!

And we’re very happy that they loved our proposal!

Check it out now at http://www.pbtconsultants.com

Follow our Facebook or Twitter to receive more updates on the PBT Consultants Rebrand project!

Passion is our main ground

(via ffffound)

We strongly believe that in order to draw and sustain passionate and loyal clients, we should be passionate about our work first. We ensure that everything from pre-development discussion up to planning the wireframe, designing the concept, creating the visual communication and site architecture to the actual web development is done with our own bare hands.

That’s complete satisfaction for us and maximized value for you, our clients. If that sounds cliche and overrated to you, it would be good to know that we only say what we mean.

Religious web standards practitioner

We practice web standards in developing websites. Over the years, we have been educating our peers and clients the importance of designing and developing websites the right way – not only will your sites look good which will increase credibility of your business, but they will be findable thus improve search traffic.

And I don’t mean to be corny but more people will know about your site so more sales opportunity!

Founded by two ladies

(via ffffound)

We believe that this is our mojo – not many (I wouldn’t say none) website design and development companies have ladies as their founders! So that makes Bitter-Coffee unique.

While being lady-founders in this industry may seem to be unusual and many would underestimate us at first impression, we are happy that we have a lot of returning clients which means – the mojo does work!

Located in Cyberjaya

Working in a creative and technical industry like ours can be stressful and hectic at times. We constantly need to elevate our mood and lift up our spirits to churn out the best end results that will not only be visually appealing but offer practical functionality.

You can’t get any of that better than working here in Cyberjaya – located a haven away from the frenetic life of Kuala Lumpur metropolis, Cyberjaya fabricates you with an ideal working environment for the creative minds. With a lush green environment furnished with lakes, parks, chirping birds and growing commercial and ICT areas make Cyberjaya a divine intervention for a healthy working environment.

Top-notch Project Management & After-Sales services

We first started the company about 3 years ago with not much hands-on experience on dealing with complex projects. Over the years, we have learned that nothing is more important than excellent and flawless Project Management. We believe that a superior Project Management can lead to a project’s success while a poor one will end up wasting your time and effort. With our effective Project Management practices and tools, we ensure all projects embarked will lead to a success!

And we won’t cut you lose as you’ll be provided ample After-Sales services as well to ensure that your website is always maintained at its best!

Always keeping ourselves up to date with latest trends

New inventions, ideas, practices arise everyday. We’ll never get enough of knowledge and information. Everyday, there must always be something new to learn as the famous saying goes “Learning is a lifetime process”.

Thus, at Bitter-Coffee, we ensure that we’re always up to date with latest trends, ideas and practices relating to our industry. We have our own in-house experiments to test out new web development methods and tricks and we find ways to introduce these new findings into our client’s projects – so your projects will have the latest technology and trends in the industry

Now that you are convinced – lets wait no further as we are ecstatic to work with you!

I want to start right now!