All images in this post link to the full screen live version of the page shown.
The first step in creating a web design for me is to get to know my client and what they want from their website. Designing a website for Dr. Robert Ibrahim Jaffe was easy in this regard because I already knew him well. After one conversation about what he wanted, I began to define an audience profile and to map out the different sections for his site. I also began to collect content material, such as photographs, text copy, audio files and graphics that would fit what we were looking for.
I spent much time exploring how to create a visual experience that would convey the generous open-hearted warmth of Dr. Jaffe’s presence. After working with several ideas, I focused on the use of photographs since they can convey the warmth of the heart better than any other visual form – (especially quality photographs of open-hearted people whose spirits are alive).
The next step was to lay out a sample page and to see how all of the components fit together best. This meant taking into consideration many factors, such as the natural flow of the viewer’s eye on a page, (which follows a Z pattern from top left of screen, to top right of screen, then diagonal to bottom left, and across to the bottom right). To work with this, you will notice that if you follow this pattern on Dr. Jaffe’s site on the first page, you will pan first across Dr. Jaffe’s name; then the holy words in Arabic “In the name of God, the Most Merciful, the Most Compassionate”; then across an image of Dr. Jaffe; then through his welcome message; and finally to an audio message and a testimonial. Each page of his site is designed in this way – intentionally.
Other components of Dr. Jaffe’s site that needed to be addressed were how to work with the delicate balance of presenting a holy look and feel that represented and harmonized with Dr. Jaffe’s spiritual life and practice, and at the same time, not to make it so strong as to subtly turn away people who may not connect with a Sufi or Islamic look. This was to work in harmony with the way Dr. Jaffe himself follows this specific spiritual tradition, and at the same time reaches out to people of all faiths and beliefs to benefit from what he has to share and offer.
I worked with this spiritual design component by adding various strengths of islamic design backgrounds or design accents, such as the islamic text background on the “Welcome” page, the islamic tile pattern under the navigation bar of the “About” page, and other pages.
Another design factor that I spent quite some time on was the use of colors. I worked hard to pick colors that Dr. Jaffe himself liked and resonated with, and to pick color combinations that worked together on any one page. This required much time both in selecting and combining colors, but also in doing so in such a way as not to lose the consistency of look and feel from page to page, which is also an important design consideration that imparts harmony and unity in a site.
I also spent time working hard with the content I had to come up with ways to make each page special and new and interesting, while continuing to maintain a consistent look and feel across the whole site. One way I did this was by changing the images in the top section of the design to reflect the content of the page. For example, the top image for the “About” page shows a photograph taken from the area where Dr. Jaffe lives. On the “Community” page, there are more images of people and community. On the first “Welcome” page, there is a mix of images to capture the various component’s of design.
In selecting how to organize the information about Dr. Jaffe for his site, I looked at his site from the perspective of someone who did not know who Dr. Jaffe was, but was looking for something related to him. This is how I came up with the idea of having a section called “Your Next Step”. The idea was to make it easy for someone who was interested in what they were reading on the site, but who might not understand why or what specifically they were looking for. This page was designed to present what was available in a step by step way, or based on specified options that were easy to choose from.
And for one page, the “Teachings” page, I had a pile of text based teachings to sort through and then have transcribed, and also some audio teachings I had selected and edited. Before I was able to get the text based teachings transcribed, it was time for the site to go up. I had the teachings page as one of the main navigation sections and so it was not so easy to simply wait to include it when it was ready. As a temporary solution, I created a partial ‘under construction’ page. And in the meantime people could listen to the audio selections I had edited.
Another design and development decision was how to work with the large amount of content about each of the programs that Dr. Jaffe offered. I decided to use ‘anchors’ to present and list the topics at the top of the “Programs” page, with the content all included below on the same page. By clicking on one of the topic names, your browser would move your view down the page to the section you were interested in. From any section, you could return to the top easily with a local navigation button at the beginning and end of each topic section, or you could just continue to read on to the next section. See the “Programs” page to see more closely how it works. (Remember, you can click on any image on this page to enlarge it.)
There are more pages to this site than I have shown here, but I think this should cover it for now. If you have any questions about a site that you might like for yourself, send me an e-mail, or give me a call.
David Tierney
David@designsbytierney.com.
(707) 965-9727
