Web Ministry: Design Tips

Whether you are using a template, designing your website from scratch or a combination of the two, there are a few tips to consider so that your webpages are visually appealing and readable by visitors to your site.

Layout and Navigation
Every website has a specific set of layout designs for its pages. Generally, a website’s homepage will have one design that is slightly modified for main section and subsection pages. In all cases, though, the site navigation menu should stay in the same location regardless of the minor changes to design for main section and subsection pages. It is a best practice to place main site navigation menus across the top or down the left side and to repeat the main site navigation menu at the bottom of each page.

People typically skim or scan webpages in an “F” pattern looking first across the top then down the left side and then into the middle of the page. Therefore, you want to place you most important information in these eye-tracking hotspots. Likewise, people will linger on a page longer if there are images alongside text versus pages of text only. That said, you don’t want to overdo it with too many images. Use a two or three column layout with some “white” space and clean, uncluttered design.

It is a good idea to limit the length of your webpages to a maximum of three letter-sized pages. If at all possible, keep the most important information "above the fold" or within the viewable area of the webpage when it opens in the browser. People will scroll down below the "fold" but only if they believe what they are looking for might reside there. Never make a page that must be scrolled beyond the "crease" or the right side of the window.

Colors and Fonts
Your design should make use of strong contrasting colors and easy-to-read font styles. Use light colors on dark backgrounds and dark colors on light backgrounds. It is a best practice to avoid color combinations that are hard to read, such as red and green, green and yellow and blue and yellow.

Select only fonts that are supported by most browsers, such as Courier, Times New Roman, Arial, Helvetica, Georgia, Tahoma, Trebuchet, Geneva, and Verdana. If you are using a font that is not widely supported by browsers, create the text as a graphic so it displays as you intend. That said, it is not a good idea to make all your text into graphics since these cannot be searched by search engines for keywords and they will take longer to load when the page is accessed.

For the body text on your pages, do not place the font size lower than 10 pt. Likewise, make heading font sizes larger than body text font sizes, and make heading fonts a different color in bold to set them off from the body text.

Sample Websites
To get an idea of how some United Methodist churches are designing good websites, visit these sites:  

• Bethlehem
  Thornton, Pennsylvania
   
• Chinese Community
  Oakland, California 
   
• Clear Branch
  Trussville, Alabama 
   
• Church of the Resurrection
  Leawood, Kansas 
   
• Covenant
  Winterville, North Carolina 
   
• Fullerton First
  Fullerton, California 
   
• Glide Memorial
  San Francisco, California 
   
• Ginghamsburg
  Tipp City, Ohio
   
• Granger Community
  South Bend, Indiana
   
• The Grove
  Mobile, Alabama
   
• Highland Park
  Dallas, Texas
   
• Morningstar
  Chelsea, Alabama
   
• Mount Bethel
  Marietta, Georgia
   
• Quest
  Augusta, Georgia
   
• St. Luke
  Pensacola, Florida
   
• Tuscaloosa First
  Tuscaloosa, Alabama
   
• University Carillon
  Oviedo, Florida
   
• Victorville
  Victorville, California

Other online design tips:

• 25 Top Church Website Design Tips
• 40 Non-Church Website Designs

_______________

Suggested websites are for example only. United Methodist Communications neither endorses or guarantees the reliability or terms of use and services for these suggestions nor does it benefit in any way from listing the websites as examples or by subsequent use of a third party directed from this site.