So to the right, you can see a significant amount of imagery. That’s because Faithvine was one of those projects that went on for awhile and had many, many different needs. We’re talking everything from print to interactive to video/motion design. Some of the highlights are listed in the diagrams below.

Diag 1: Faithvine Homepage

Diag 2: Faithvine Logo

Diag 3: Faithvine Profile Page

Diag 4: Piggy Back Contest Logo

Diag 5: Weekly Download Page

Diag 6: Faithvine Icons

Diag 7: Get Started Page

Diag 8: Promotion Card Front

Diag 9: Promotion Card back

Diag 10: Faithvine Collateral

The goal of Faithvine was to create an online social networking site, but one that was a safe harbor for Christians. Think of all the bad press places like MySpace or Facebook get from parent/religious groups, and you can see the potential market.

And, most difficult, make the site so that it can appeal to people of all age ranges: from 13 to 65, male or female.

There had been previous versions of the site already live on the web and when I came into the fold, the one thing Faithvine was lacking more than anything else was personality. Everything had been well designed, but seemed very generic. In fact, the logo I inherited had little to nothing to do with Christianity, vines or leaves. It was just a type treatment.

Choose the Colors

First thing I did was figure out the color palette and tone. I wanted the logo to ruminate for awhile, and to come from the site and community, rather than vice versa. I decided pretty quick to go with a Spring inspired color palette – not too pastel, but softer, brighter, and most importantly, joyful colors.

My thinking was: Christians are joyful in their love for Christ. In their choice to be religious in the first place. Sure, there are the doom and gloomers out there, but Faithvine wasn’t about appealing to that particular audience. It was all about a respectful, lighthearted communication between like-minded Christians.

Since people worship differently, Faithvine would be a place where someone could meet another Christian who approached the Bible and doctrines the same way.

To push across this joyful mindset, I used purple (the color of royalty, for the King of Kings) as the main color, with browns, yellows, oranges, greens, and occasionally, blues to help set apart various portions of the page. I’d seen the competition, and liked a lot of what Facebook was doing, not so much of MySpace. But one of the problems I had with Facebook was how all the white & blue started to run in together. It made separating portions of communication difficult.

Slight gradients of a color, typically fading into transparency/white, were used to differentiate one column or section of information from another. The goal was to give structure while also keeping that sense of openness.

Being a designer during the beginning of the internet, I remember far too well the days of websites with boxes crowded next to boxes and how undesirable this was. But, I also know that when you have a significant amount of information, it’s truly hard to just let the boundaries of fonts and headers draw the invisible boundaries for users.

The hierarchy is gone. The structure not so easy to find. I really wanted to fix that with Faithvine. I had to strike a balance. I think Diagram 3 shows a success with that goal. Clear structure of data, easy to read, open feeling, and a bright, colorful palette.

Big Buttons Are Good!

Because the target audience was spanning the gamut, I decided to have some fun with buttons and logos on the site.

All contests and calls to action, especially buttons, would be big. Big, glossy, rounded edged, and a continuing motif of striping can be seen in the buttons on the site. This drew immediate attention to this call to action, while also helping to further the goals previously established.

Contests for the userbase happened often, so I took the opportunity to create contest logos each time out of the gate. Sometimes it would just be the words Win $1000! or sometimes an icon or an image, but always it was bright, colorful, attention grabbing and consistent.

By creating a logo for each contest or promotion, we immediately branded these elements. No matter where a user went, if they were following a path for a contest or promotion, they could see the big contest imagery right on the page. So there was never any ambiguity on what was and considered applicable to what they were doing.

Custom Icon Set

To fit the color palette and to help with the personality, I created custom iconography for pretty much all facets of the site. Whether it was a user group icon or a Bible Tool icon, these were all given a specific treatment which added to the persona of Faithvine and made the site easier to use.

I was defining a visual language, so repeat viewers could know, within no more than a glance, what to do with the various elements on the site. This means to bookmark. This means to rate. This means to add. So on.

Christian Music Fun

Along the way, we teamed up with a great Christian label for some cross promotions.

We were able to give our users access to new, exciting music from some of their favorite artists (Diagrams 5, 8 and 9) and in return, the bands were able to show they were part of a tapped in community, given a place to talk and discuss things with their fans, and hopefully gained some new listeners along the way.

The promotions turned out well for both Faithvine and the record label.

Logo and Collateral. Finally

So after all the basic work had been done on the site, it’s personality and how it was going to function and work with the users, I was able to figure out the logo as seen in Diagram 2.

Purple was a great color that I’d rarely seen in logos. Usually, it doesn’t work, but with Faithvine’s joyous and friendly attitude, it fit like a glove.

I spent a good while trying to decipher what the best “mark” would be for the logo. I toyed with crosses, with vines, with suns, with pretty much all Christian related symbology. Finally, it dawned on me that a grape leaf, due to the Eucharist, combined with a stylized cross, would be nice, clean and simple.

And it was.

For the font, I used Georgia and you can find it throughout the Faithvine website. One of my favorite serifs, toying with the leading and kerning helped to create that specific visual footprint I needed the site to have.