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

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!