CBC Web Design: Glossy Black Theme and its inspirations.

 [Click images to enlarged]

Finalized mockup for CBC welcome page. 

Compare to the 2 primary examples provided by the client:

the use of featured content boxes for layout

hip tekky design with dark background and metallic text

I needed something to reflect the client's 3D mantra and taste for chrome and gloss. The clients has objective of bring technology to an otherwise old fashioned traditional church. I wanted the design to reflect the churches respected history and tradition while looking toward the future and technology. The content was based on clients example websites like Bethel Baptist Institutional Church which used "advertisement-like" boxes to feature church activity. A flashy Jamal Bryant Ministries (refers to style and type of web site) inspired the black, glossy, metallic theme. An homage to the traditional shield type logo was used but with a Web 2.O twist. See previous post.

But I have to use my own design aesthetic for this Tradition meets Technology theme. Unique. Geometric. Coded with color. Metaphorical motifs. Far removed from the ubiquitous kitschy church websites.

I took inspirations from the following dark websites:

http://wearecyan.com/  teal/charcoal palette; icon use; cool background texture for header

http://www.ttthings.com/   starry background

http://www.futuretalent.org/ photo extraction with colored glow fade into black background; content box - glossy black w/ bright icon - MAIN INSPIRATION for sidebar in my theme

CBC Web Design: Evolution of Header and Letterhead

 [Click images to enlarged]

 First version with all the major elements established. Original Edwardian script for site title lack symmetry. The "3D MINISTRY' has balanced height, but 3D needs emphasized in center.

The The League of Moveable Type's Orbotron typeface (open source) was pivotal to the final design solution. This version is symmetrical with the "3D" emphasis front and center over the motto. This font not only provides both symmetrical height and width for the text elements, it fits the "technological", "futuristic"  theme of the black glossy, "iPad-looking" website interface. A few sparkles top it off.

Web site logo simplified for a print version. These early sketch need to be finalized in a salable vector image. Which can be re-sized with out degradation.

Designing a logo for this project has been very challenging.  None of the elements naturally fit together. I was charged with developing a logo based on an this amateur mall airbrushed T-shirt artwork. Finding the right font style for a composition using "3" and "D" on each side of "cross" took a lot of trial and error. I decided to incorporate the shield as a shape to enclose these 3 stubborn characters. The shield also provides an excellent visual motif for any Christian organization. It adds a touch of "traditional" imagery to the "modern" Tekky" design which reflects the church's objective to move the ministry of this 90 year old historic church into modern technology. The shield shape can be use in a varity of sizes, solid or outline, 2D or 3D in graphic design. See how the shield was used as icon throughout the Central Baptist web page design.

The cosmic rings from the website design has bee translated into two symmetrical "swooshes" for print.  The logo color scheme may adjusted by easily changing color/style of each background swoosh or as one ring. See upcoming post for examples.

Related articles

• How to Design Your Own Letterhead (brighthub.com)
• 10 Great Examples of Letterhead Designs (brighthub.com)
• Weekend Project: Styling Sidebar Headers (everything.typepad.com)
• 10 Free Business Letterhead Templates (brighthub.com)
• Unique Letterhead Printing That Works (business.ezinemark.com)
• Graphic Design Prices (adrinahdesign.com)
• Overview of Different Letterhead Styles (brighthub.com)

CBC Web Design: Glossy Black Theme and Grid layout established

Finally getting a clear design direction for the CBC website. I needed something to reflect the client's 3D mantra and taste for chrome and gloss. The clients has objective of bring technology to an otherwise old fashioned traditional church. I wanted the design to reflect the churches respected history and tradition while looking toward the future and technology. The content was based on clients example websites like Bethel Baptist Institutional Church which used "advertisement-like" boxes to feature church activity. A flashy Jamal Bryant Ministries (refers to style and type of web site) inspired the black, glossy, metallic theme. An homage to the traditional shield type logo was used but with a Web 2.O twist. See previous post.

But I have to use my own design aesthetic for this Tradition meets Technology theme. Unique. Geometric. Coded with color. Metaphorical motifs. Far removed from the ubiquitous kitschy church websites.

I took inspirations from the following dark websites:
http://wearecyan.com/  teal/charcoal palette; icon use; cool background texture for header
http://www.ttthings.com/   starry background
http://www.futuretalent.org/ photo extraction with colored glow fade into black background; content box - glossy black w/ bright icon - MAIN INSPIRATION for sidebar in my theme

Red Arrow marks "fold" line. All above the fold stays fixed.
Blue arrow marks options for featuring up-datable "events" info -  the main body, sidebar module, button link.
Yellow arrow points out the phrase "steps" that unifies the visual "shoes" concept with the client, CBC mission on the move theme.

CBC Web Design: Shield Logo Inspired Theme (cracked Webs.com CSS code)

Yahoo! I finally cracked into the Webs.com template CSS. Customer service wouldn't give me the CSS class to change nav bar color. DUH I finally thought to "View Page Source"  and not only did I change my nav color, I figured out side bar CSS to customize it with this cool glossy background for the titles with shield icon reminiscent of the CBC logo. I'll use black glossy buttons and shield motif to create a theme for the CBC site...good practice for creating Wordpress themes...my next goal.

Related articles

• Themeforest Complexity v2.1.2 Premium WordPress Theme (r4dezign.wordpress.com)
• Styling and skinning your apps with TravelTripper (googlewebtoolkit.blogspot.com)
• HTML&&CSS Experimenting (tinytitan.wordpress.com)

CBC Logo Development: Photoshop rendering