National Dialogue on Islam and Democracy is a project organized by Merdeka Centre, Centre for Public Policy Studies (CPPS), International Institute of Islamic Thought and Civilisation (ISTAC), and International Institute of Advanced Islamic Studies (IAIS), supported by The Asia Foundation (TAF).
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
