Saturday, June 27, 2009

Website Assignment: FlexTime Solutions, Inc.

I was asked to completely redesign the website for FlexTime Solutions, Inc. This is a screen capture of the main page of their original website:

(Click on image to enlarge)

Below is the the main page of the site I designed for them (the site is at flextimesolutions.com).

(Click on image to enlarge)

I worked closely with Kathleen Shelby, one of the principals of FlexTime Solutions, to design the new site. First we reviewed several websites she liked to give me an idea of what she was looking for. Then, working with these ideas, a rough draft of the revised content, and the blue, green and gray logo which had been designed previously, I pulled it all together into the original design seen above.
Kathleen provided all the text, and I directed her to istockphoto.com to select artwork at a reasonable price.


After the new website was launched, Kathleen emailed me:
Nina,
I think the site looks great - really great! I so appreciate your suggestions, ideas and implementation.

Thursday, June 4, 2009

Photo Assignment: The Bishop of Newark ("Gates of Hope" Vestments)

(Click on image to enlarge)

After taking official portraits of the Bishop of Newark last year, I was asked to photograph the him a second time, in his "Gates of Hope" vestments (above). While there I also took some "purple shirt" photos of him in front of a stained glass window inside the cathedral that depicts children looking at the cathedral (below).

(Click on image to enlarge)

Monday, May 11, 2009

Redesign of the Website of St. George's Church in Maplewood, NJ

I first launched the website for my home parish, St. George's in Maplewood, in March 2001. Nearly four years later, in late 2004, I completely redesigned it for St. George's centennial year in 2005. Since then I've created a number of other websites, and greatly expanded my knowledge of CSS and JavaScript as well as my skills in web design. I've also grown more skilled with my digital SLR camera and built up a photo library of literally thousands of digital photos of St. George's ministries -- many taken by me, as well as some taken by other parishioners. "A picture's worth a thousand words," and I knew that if I could find a way to incorporate these photos into the website design, it would be more effective than any mission statement at conveying what St. George's is all about. So last winter, I began thinking about a new website design that would do that.

The problem was, I wanted to be able to show as many photos as possible, as large as possible, but without giving up valuable "real estate" on the site that was needed for text. Then one day a friend directed me to the website of St. Olaf College to see her daughter in a video of the choir. That's where I got the idea to use photos cropped as long panoramics in the header of each page.

(Click on image to enlarge)

The two white arrows at the top right of each page can be used to scroll through the header photos. The main page has over 30 header photos representing all the ministries of St. George's. Each sub page has two or more photos representing that particular ministry. In the few cases where relevant photos weren't available, generic photos of St. George's grounds and stained glass windows were used.

New header photos can be added very easily, thus keeping the website fresh with minimal effort.

(Click on image to enlarge)

I hand-coded an original template using HTML, CSS and Javascript which was used to create all 24 pages on the site. Some technical considerations taken into account in the design:
  • The website can be displayed on even the oldest, smallest monitors without horizontal scroll bars -- the gray space on either side will simply grow or shrink to fit the screen dimensions.
  • All links to email addresses are encrypted using JavaScript so they can't be harvested for spam. On computers where JavaScript is disabled, emails will be spelled out as text ("parish-office AT stgeorges-maplewood DOT org").
  • The website is search engine optimized by the appropriate use of header tags and by putting the most important content at the top of each file.
  • The use of CSS (Cascading Style Sheets), and include files for repeating code such as menus and footers, allows design changes to be made to the entire site by changing just one or two files, rather than having to modify every single HTML file.

Tuesday, April 7, 2009

Photo Assignment: The Bishop's New Vestments for "The Voice"

I was commissioned to photograph the Bishop of Newark's new "Gates of Hope" vestments for The Voice, the diocesan newspaper. My photos will be used to illustrate articles about each of the four "Gates of Hope" in four issues of The Voice, starting with the issue that came out today:

(Click on image to enlarge)

Friday, March 20, 2009

First Photo in the New York Times

OK, so it’s not the print edition, but I did finally have one of my photos published -- with photo credit! -- under the imprimatur of the New York Times.

(Incidentally, I'm responsible for both the website and the sermons blog linked to in the article.)

Saturday, February 28, 2009

Photos of "Joseph and the Amazing Technicolor® Dreamcoat"

Twenty-six photos of the February 22, 2009 amateur performance of Joseph and the Amazing Technicolor® Dreamcoat, at St. George's Episcopal Church in Maplewood, NJ.

Friday, January 9, 2009

Church PR: "Joseph and the Amazing Technicolor® Dreamcoat"

(Click on image to enlarge)

This has been my main project for the past few weeks: a graphic to promote my parish's production of Joseph and the Amazing Technicolor® Dreamcoat. The image above is a scale representation of a 6x10 ft vinyl banner to be displayed on the front of the church, and a 3x5 banner to be displayed by the back door. Variations of the same design are being used for postcards, flyers, emails and on St. George's website.

When starting the design I immediately envisioned the words of the title in the shape of a coat. When I asked what color scheme to use, I was told "bright rainbow." I found the rainbow swirl graphic on www.istockphoto.com after searching through hundreds of vector graphics tagged "rainbow." Unable to find a coat graphic that would work for what I wanted, I ended up drawing the coat myself as a bitmap graphic using Macromedia Fireworks.

I did the design above as a vector graphic in CorelDraw with everything except the coat. I then sent the CorelDraw file and the bitmap coat graphic to my friend, designer Linda Yesline (of www.asterandsage.com); she "vectorized" the coat graphic for me in Adobe Illustrator and inserted it into the final design.


The fonts are Berlin Sans FB (inside the coat) and Berlin Sans FB Demi (the date), and then simply Arial for the phone number and Arial Narrow for the website address.