Project Overview

Prior to the launch of the Church at Winchester, we were tasked with creating a partnership and recruitment website and brochure. The primary focus was to develop partners and supporters for the Winchester, VA based church plant.

Project Details

The difficulty with creating marketing materials for a church plant (or, really, any startup) is that you don’t have a lot of collateral visual materials (i.e. pictures of people) so you end up resorting to stock photography which, let’s face it, usually looks like stock photography. The buildings are a little too nice, the people are a little too polished, the grass is a little too green and you just can’t place any of it locally.

When I started to develop the marketing materials for the Church at Winchester, one of the first things I recommended was that they hire a good photographer to take some pictures of the area in which the church was to be planted. When I received the photos I immediately knew the direction for both the website and the tri-fold brochure.

From the outset the goal was to use the local photos provided to make a connection with those who lived and worked in the Northern Virginia city. The uniqueness of the photos provided the visual flair of both designs.

Homepage Details

The homepage of the website features a minimal navigation bar at the top of the browser window and a random image as the visual focus of the page. This is very similar to the design of the brochure which strategically places text over full bleed images. The full window background image effect was achieved using the Vegas JQuery plugin. The homepage also features a randomly selected quote from the main content areas (Vision, About Partnership, About Us, etc.). This quote is linked to each of the corresponding pages and acts as a means of directing visitors to the most important areas of the site.

Finally, there is a section for “recent content” which includes the most recent blog entry, tweet and an email newsletter sign-up form. The recent content section is persistent among all pages throughout the site.

Content Page Details

A slightly different design was created for the content pages. Instead of using the full background image, we used a background image that would always be the full width of the browser window but that would extend 630px down the body of the page. The body content floats above the background image creating a highly readable visual separation between the content and the imagery. Content page background images were chosen to loosely represent the text content on the page.

Typography

In addition to the unique visual imagery on the homepage, we also wanted to use a heavy typeface that would be readable when placed over the images that were chosen for the homepage. We chose LTC Squareface by Lanston Type for its heavy weight and squared corners.

Our choice for the body text was Freight Sans Pro by Phil’s Fonts. We wanted a typeface that complemented the typeface used in the logo (ITC Avant Garde Gothic). Additionally, Freight Sans Pro offers a variety of weights ranging from Light to Black which made it flexible enough to be used in both headlines and body content.

Icons

One of the problems with high PPI (Retina) Displays is that icons can look pixelated.  We used Fontello to solve the issue of pixelated icons. Fontello allowed us to create icons using web fonts which means that now matter how high the resolution of the display, the icons will always be crisp.

ExpressionEngine

Another primary goal was the ability of those involved with the church plant to edit content as needed and post entries to their blog.  To meet this need, we used the ExpressionEngine content management system (CMS).  In addition to creating and editing content, the CMS also allows the church plant to maintain a list of those that have committed to becoming partners or who have pledged support using the become a partner form on the site.

ExpressionEngine Links and Resources

• Removing index.php (EE) - http://expressionengine.com/user_guide/general/remove_index.php.html
• ExpressionEngine YouVersion Plugin - https://github.com/erikreagan/er.youversion.ee_addon
• Edit This for EE2 allows the site owner to edit content via an edit link on the front end of the site - http://www.hopstudios.com/software/edit_this
• FreeForm allows for the collection of Partnership Commitment forms submitted through the website - http://www.solspace.com/software/license/freeform/

Reference Links

The following pages, people and sites were instrumental in creating this site.

• Unique Photos Supplied by Brooke Scheler Photography - https://www.facebook.com/pages/Brooke-Scheler-Photography/101889903211814
• Vegas Full Page JQuery Plugin used on the homepage - http://vegas.jaysalvat.com/
• Full Page Background Image Tutorial used on sub-pages - http://css-tricks.com/perfect-full-page-background-image/
• iPhone CSS—tips for building iPhone websites - http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/
• Freight Sans Pro - https://typekit.com/fonts/freight-sans-pro
• LTC Squareface - https://typekit.com/fonts/ltc-squareface
• Fontello - used for custom icons. - http://fontello.com/
• Inserting Unicode Characters in CSS - http://alanhogan.com/tips/css/special-characters-in-generated-content

Our ears are burning.

The work Firebrand Media did for us went beyond anything we could have imagined. We gave them the general idea of what we were looking for in a brochure and a website and, based on their recommendation, some quality pictures of the area. They took it from there. The result was two top quality products that communicate our information in a way that is eye catching and unique. Brad was great to work with all along the way and provided an outstanding product. Thanks to Firebrand Media we now are able to tell our story through multiple media outlets. - Shay Osborne, Church Planter, The Church at Winchester