David Gillaspey
Wed., Jun. 20, 2007, 3:00 am
Hi all,
(This will be updated regularly til I’m satisfied with it.)
Rather than repeat the same information each time I review or critique websites on this forum, I've decided to put some information in a thread here about basic website design. This is based on my having reviewed 14,000 church websites to date for The International Directory of Church Website Design (http://www.greatchurchwebsites.org/results.php?sR=Yes&Display%21=Display+churches%21&sT=&bS=1&sC=10&sO=ASC), of which I am the editor.
The diagram below shows the basic design pattern for contemporary church website design. Below it, I show several variations on this pattern, all equally acceptable. There are, of course, variations on even these variations. There is also a wholly different style of home page layout I demonstrate at the bottom of this thread via an example screen shot. But that style of layout requires a fine sense of design and composition. Unless you’re naturally gifted as an artist, or have an art education, don’t try it.
So, for most of you, starting with the basic design or one of its variations shown below is the right first step. The banner and lefthand column provide a foundation to help ensure your design is at least acceptable, if not award-winning. In fact, you probably won’t develop an award-winning site based on these patterns, but you’ll have a site that is of acceptable design and won’t be a turnoff to non Christian visitors.
(I realize some of you will think these instructions to be trivial, but you haven’t seen the 1000s of bad — really bad — church websites that I’ve seen.)
Start with the banner. I won’t provide an exact number for how deep it should be — because every element on a home page has to be in proper proportion to the other elements. But in general, avoid making the banner too shallow. The banner is like the foundation of the home page design, in a reverse sort of way. (Foundations are usually under the house, right?) If it’s too shallow, the banner just doesn’t look good. Therefore, try starting with a banner that’s 2 inches deep (144 pixels), more or less, including navigational bar if you choose to put the menu at the top of the page.
On some church websites, the banner is much deeper — even three or four inches deep. But only do this if you have dramatic art or photos or animation to put there. On the other hand, if you have some other element on the home page that’s really big — and thus is the focal point of the composition — than you might want to make the banner a little less deep, so banner and the focal point don’t compete for attention.
(A definitive focal point – usually the hallmark of good design — is surprisingly absent even among well-designed church home pages. However, there’s a reason for this: The banner usually serves as the focal point of the composition in website design. Shouldn’t, but it does. That’s why you really want to put a lot of time and effort into making your banner as appealing as it can be. )
http://www.greatchurchwebsites.org/art/SFCW/basic_layout_pattern1.gif
Below is the first of several variations (in no special order). This one adds a righthand column.
http://www.greatchurchwebsites.org/art/SFCW/basic_layout_101b.jpg
This one (below) adds a shallow footer across the bottom of the entire site. Because it is so shallow, this space typically gets used only for contact information (church address, phone number, etc.).
http://www.greatchurchwebsites.org/art/SFCW/basic_layout_101c.jpg
This one (below) adds a deeper footer across the bottom of the entire site. Because it is deeper, this space typically gets used for a variety of things: graphical or text ads for ministries, intro to articles that continue on inside pages, announcements or upcoming events, etc. In modular design, the space left to right would typically be divided into an equal number of rectangles of space, and obviously so.
http://www.greatchurchwebsites.org/art/SFCW/basic_layout_101d.jpg
Below: occasionally you’ll see a home page with a righthand-only column. I wouldn’t recommend this unless you know what you’re doing.
http://www.greatchurchwebsites.org/art/SFCW/basic_layout_101e.jpg
Finally, as promised, here’s an example of more free-form design that doesn’t rely upon banners and footers and left- and/or righthand columns to frame the main content area. But this style of layout is only for creative artists to attempt.
http://www.greatchurchwebsites.org/art/VIRGINIA/VA_destiny.jpg
By no means does the above exhaust the range of possibilities for layouts — but I’ll save that for another thread.
Below is a diagram showing what I call the "curved look." This was state-of-the-art website design during the last half of the '90s. It's way out of date now, so don't follow this. Highly skilled web designers occasionally still use this pattern with good effect, but you should stay away from it. Got that?
http://www.greatchurchwebsites.org/art/SFCW/curved_look.jpg
Hope this is helpful.
Sincerely,
David Gillaspey
President
Great Church Websites
(This will be updated regularly til I’m satisfied with it.)
Rather than repeat the same information each time I review or critique websites on this forum, I've decided to put some information in a thread here about basic website design. This is based on my having reviewed 14,000 church websites to date for The International Directory of Church Website Design (http://www.greatchurchwebsites.org/results.php?sR=Yes&Display%21=Display+churches%21&sT=&bS=1&sC=10&sO=ASC), of which I am the editor.
The diagram below shows the basic design pattern for contemporary church website design. Below it, I show several variations on this pattern, all equally acceptable. There are, of course, variations on even these variations. There is also a wholly different style of home page layout I demonstrate at the bottom of this thread via an example screen shot. But that style of layout requires a fine sense of design and composition. Unless you’re naturally gifted as an artist, or have an art education, don’t try it.
So, for most of you, starting with the basic design or one of its variations shown below is the right first step. The banner and lefthand column provide a foundation to help ensure your design is at least acceptable, if not award-winning. In fact, you probably won’t develop an award-winning site based on these patterns, but you’ll have a site that is of acceptable design and won’t be a turnoff to non Christian visitors.
(I realize some of you will think these instructions to be trivial, but you haven’t seen the 1000s of bad — really bad — church websites that I’ve seen.)
Start with the banner. I won’t provide an exact number for how deep it should be — because every element on a home page has to be in proper proportion to the other elements. But in general, avoid making the banner too shallow. The banner is like the foundation of the home page design, in a reverse sort of way. (Foundations are usually under the house, right?) If it’s too shallow, the banner just doesn’t look good. Therefore, try starting with a banner that’s 2 inches deep (144 pixels), more or less, including navigational bar if you choose to put the menu at the top of the page.
On some church websites, the banner is much deeper — even three or four inches deep. But only do this if you have dramatic art or photos or animation to put there. On the other hand, if you have some other element on the home page that’s really big — and thus is the focal point of the composition — than you might want to make the banner a little less deep, so banner and the focal point don’t compete for attention.
(A definitive focal point – usually the hallmark of good design — is surprisingly absent even among well-designed church home pages. However, there’s a reason for this: The banner usually serves as the focal point of the composition in website design. Shouldn’t, but it does. That’s why you really want to put a lot of time and effort into making your banner as appealing as it can be. )
http://www.greatchurchwebsites.org/art/SFCW/basic_layout_pattern1.gif
Below is the first of several variations (in no special order). This one adds a righthand column.
http://www.greatchurchwebsites.org/art/SFCW/basic_layout_101b.jpg
This one (below) adds a shallow footer across the bottom of the entire site. Because it is so shallow, this space typically gets used only for contact information (church address, phone number, etc.).
http://www.greatchurchwebsites.org/art/SFCW/basic_layout_101c.jpg
This one (below) adds a deeper footer across the bottom of the entire site. Because it is deeper, this space typically gets used for a variety of things: graphical or text ads for ministries, intro to articles that continue on inside pages, announcements or upcoming events, etc. In modular design, the space left to right would typically be divided into an equal number of rectangles of space, and obviously so.
http://www.greatchurchwebsites.org/art/SFCW/basic_layout_101d.jpg
Below: occasionally you’ll see a home page with a righthand-only column. I wouldn’t recommend this unless you know what you’re doing.
http://www.greatchurchwebsites.org/art/SFCW/basic_layout_101e.jpg
Finally, as promised, here’s an example of more free-form design that doesn’t rely upon banners and footers and left- and/or righthand columns to frame the main content area. But this style of layout is only for creative artists to attempt.
http://www.greatchurchwebsites.org/art/VIRGINIA/VA_destiny.jpg
By no means does the above exhaust the range of possibilities for layouts — but I’ll save that for another thread.
Below is a diagram showing what I call the "curved look." This was state-of-the-art website design during the last half of the '90s. It's way out of date now, so don't follow this. Highly skilled web designers occasionally still use this pattern with good effect, but you should stay away from it. Got that?
http://www.greatchurchwebsites.org/art/SFCW/curved_look.jpg
Hope this is helpful.
Sincerely,
David Gillaspey
President
Great Church Websites