Church Website Design: 7 Simple Tips

Visuals communicate as much as words, if not more, that’s why your church website design should demand serious attention. Whether you’re designing your own website from scratch (and if so, impressive), using a website builder, or hiring a designer, you’ll want to know the basics of website design.
That way you can create an appealing website or evaluate the merits of one being made for you. You would also be more than prepared to use a church website builder, such as Faithlife Sites, which is free to use and made just for churches.
Here are the big 7 church website design tips to keep in mind.

1. Use simple fonts and text styles

Design for readability and comprehension.
Too many fonts scatter the mind, which is the opposite of what you want your website to do.

For that reason, follow these simple rules for fonts and text styling:

  • Stick to one or two fonts
  • Choose classic fonts that are highly readable, such as Georgia, Verdana, Arial, Tahoma, or Times New Roman.
  • Minimize styling (bold, italic, underline, etc.)
  • Be consistent in casing. That is, if headlines are capitalized on one page, they should be on another. It doesn’t matter so much what standards you choose, so long as you’re consistent.*
  • Stick to two or three font sizes (the biggest for headlines, the next biggest for subheads, and the smallest for normal text).
  • Be strategic with what you callout to drive the viewer’s eye around your page. If everything is bold and big, then nothing is. Reserve big fonts for what matters most.

A good example of these principles in practice is Commons San Diego’s site. They are consistent and simple in their styling:
Church website design: good fonts and text styles
good fonts and text styles 2
* If you want to borrow Faithlife’s casing standards, which follow the Chicago Manual of Style, those are:

  • Headlines: Title Casing, Which Is Like This
  • Subheads: Sentence casing, which is like this.

Subheads that form a complete sentence receive punctuation like any normal sentence would. For headlines, use these quick tips:

  • Capitalize the first and last words
  • Lowercase articles (a, an, the)
  • Lowercase prepositions (including according to, during, etc.)
  • Lowercase conjunctions (and, but, for, or, nor)
  • Capitalize everything else (nouns, pronouns, adjectives, verbs, etc.)

2. Use quality, real-life photos

Perhaps no church website design choice matters more than the imagery you choose.

And the best church website photos are of real people from your church.

Here are a few guidelines beyond that general rule:

  • Have a photographer take photos of your church. Chances are someone in your church is either a professional photographer at least has the chops to become one. Recruit that person to take photos of your church, including moments from worship services, home group fellowship, all-church gatherings (like potlucks), summer camp, and more.
  • Favor candid over staged. It’s easier for visitors to imagine themselves in a candid photo, whereas a staged photo can make them feel like outsiders. Candid is also more genuine and sincere.
  • Get permission from people in your photos before posting them to your site. You might let your church know when an event will be photographed, too, as some people are more sensitive to being photographed than others.
  • Upload high-resolution photos. Upload your photos at around 72 dpi. That way the images will be crisp, but it won’t take forever for your site to load. (You can use a site like tinypng.com to resize your photos.)
  • If you do use stock photography, find photos that would match guidelines 1 and 2 above. Faithlife Sites is a good source for stock photos made just for the church, but you can also use sites like Unsplash and CreationSwap. (You can also pay for photos on sites like Lightstock, iStock, Adobe Stock.)
  • Choose photos that reinforce your words. For example, if you’re describing your home groups, show people meeting in a living room or kitchen. Photos don’t need to match your words exactly, but they should work together, not in conflict.
  • Think of your photo as a way to frame your text. If you laid text over a photo, could you still read the words? Look for photos with large areas of dark or light where text can be placed. Photos with areas out of focus are also prime for overlaying with text.

The most critical piece to your church website design is having photos of people in your church. People enjoying being together will speak louder to visitors than almost any element of your website.

3. Use generous spacing

Websites are like rooms: it’s stressful when they’re cluttered.
Open up the space with plenty of . . . space.
Don’t clump all your text into one area. If a page has multiple sections of text, space them out so it’s easier to take the page in piece by piece rather than all at once.
Oasis LA does a good job of this. They have plain text sections spaced out by images.
Church website design: generous spacing
Church website design: generous spacing example 2
generous spacing
At first you may feel like you’re wasting space, but it actually enhances the information you want people to see. Websites are a journey, not a race. Give people time to take in each bit.

4. Choose contrasting colors

Contrasting colors (black and white, blue and yellow, etc.) are critical for readability.
For example, look at the difference here:
example: contrasting colors
The left-hand word is much easier to read. And since your site will be viewed on a variety of screens (some offering less clarity than others), the higher the contrast, the better.
There are plenty of resources online to help you choose contrasting colors (such as this one), but ideally your church website builder has premade color templates you can choose from.
And as with fonts, you should be consistent—each page shouldn’t have a different color scheme. Does your church already have one or two brand colors in the logo? Pick colors that are consistent with it or compliment it.
Again, this is a good reason to use a church website builder like Faithlife Sites. Professional designers make all their templates, so they stay consistent with color, fonts, and styling page to page.

5. Make your site easy to structure

Church websites run the risk of loading the viewer with too much information too soon.
That’s why it’s essential you have a navigable structure—one that unveils information gradually.
Give people only the info they need to take the next step.

Generally speaking, each page should have one goal.

  • Homepage: Get people to visit.
  • Getting Involved: Show people what ministries they can join.
  • Events: Show people what’s happening this month.

And so on. You might opt for a page to have more than one goal or action that a person can take, but try limiting yourself to three. (And even then, give one action priority.)
Think of your navigation menu as the trailhead marker for every option. All someone needs to start hiking is the first sign.
With every page, ask, “What is the one step we want them to take?” Then design around that, and create more pages if you need to.

6. Use lots of media

Media is a great way to help people engage with your websites. People love watching videos and browsing photos.
As cliche as it is, a picture is worth a thousand words—and takes a lot less time to read.
Be liberal with your use of media. If you can, have a video on every page that’s related to the main idea (for example, a sermon clip on the sermons page, or a video of the last youth retreat on the youth ministry page).
The eye is drawn to video, and it’s a great way to communicate the story and stories of your church.
The same goes for photography, and it’s lower-hanging fruit. Consider adding a “Media” button as one of your main menu options so people can browse photos and videos easily.

7. Make your site mobile-friendly

Most people will view your site on their phones. That means your information is scrunched into a small place.

Keeping that in mind, here are a few church website design tips for mobile:

  • Keep copy minimal. Long chains of text take a while to scroll through on phones.
  • Keep pages short. The longer someone scrolls, the harder it is for them to take in the page. Be concise.
  • Avoid massive images and text. Large items don’t scale well on mobile.
  • Make buttons and links big enough to tap. If a link is too small for a fingertip, it won’t get opened.

You don’t have to be a professional designer to design a beautiful website. If you follow these simple tips, you’ll cover the basics of good design.
And if these still feel too daunting, remember that most church website builders do the designing for you. All you have to do is plug in text.
Try it now with Faithlife Sites—you can be building your site within a minute. Best of all, it’s free.
church graphics blog

Share
Written by
Matthew Boffey

Matthew Boffey (MDiv, Trinity International University) is the pastor of worship at Christ Church Bellingham. He is also editor-in-chief of Ministry Team magazine, has edited several books, and has written for several blogs and publications, including Relevant online, the Logos blog, and the Faithlife blog.

View all articles
Written by Matthew Boffey