Wesite Redesign – Silent Voices
I recently updated the look and feel of the Silent Voices website. Here is a brief description of the organization:
Silent Voices is a ministry that provides services to women struggling with pregnancy and abortion related issues. Silent Voices provides care to pregnant women, single mothers and their children, as well as to women who had already had an abortion. They offer pregnancy tests, abortion/pregnancy education, emotional, physical and spiritual support and post abortion support groups. While Silent Voices firmly believes in and advocates the sanctity of human life, all of our clients know that they are loved and accepted no matter what their situations, backgrounds or choices.
Here is a screen shot of the website before.
Silent Voices Web Layout Before
Sharon, the director of Silent Voices contacted me and wanted to get a fresh new look. The layout was created several years ago she wanted to move away from the pink and blue theme. As we we discussed the changes, she indicated that she would like to have brighter colors, more of a springtime feel to the site. She felt that it would be more inviting. It was at this point that I put my creative juices to work. One thing that did help was she did provide me with examples of websites that she liked. This is always helpful as a starting point. I proceeded with creating three mockups in Photoshop for her and the board members to view. Once we nailed down a design, I was able to further refine the design with additional revisions. Finally, we had a new layout design had here is a screen shot of the final version.
Silent Voices Website Layout After
The conversion
For this project, my job was to create a new look to the website. The existing content is the same. I did add a couple of additional pages but nothing major. The old site also had a “splash page” and that was eliminated. The previous site was built on a table style layout. The new layout would be based on a tableless CSS design. For many of my projects lately I’ve been using the Blueprint CSS framework as a starting point for my designs. It is a good idea to have this in mind when creating the layout. Blueprint does have a PSD with the Grids to help with the design layout. The Silent Voices layout is 950px wide with 2 columns based on the 1/3 divisions. The left column is 1/3 and main content is 2/3. Blueprint makes it simple to make these divisions in the CSS.
The website is hosted on a Windows based server. And all of the existing pages are static html. The orginal site was created in Dreamweaver using the Template function. Using Templates in Dreamweaver made the conversion of each of the html files very easy. I don’t use this very often, but when I started maintaining the site I needed to learn how to use the templates. What I did for this site was update the main.dwt file to the new layout and then convert the files. It was quick and easy.
I’ve also started using jQuery recently. This is a javascript framework that is used to create some amazing effects. There is a slide show that uses this technology and was easy to implement.
When the site was approved, I backed up all of the old files. It is always a smart thing to backup when making a conversion. Just in case there is a problem and you need to revert back to the old design. Of course this was not the case. The conversion when quite smoothly. I only had to make a few very minor adjustments.
You can view the site at http://www.silentvoices.org/ And finally, if you have an idea for a website that you want designed and developed please contact me. I am available to help you with your online presence.
rwjbd5ixpe
Tags: abortion, blueprint CSS, css, Dreamweaver, Graphic Design, javascript, jquery, ministry, mockup, Photoshop, PSD, Web Design, Web Development
