Search
  • Avery Moodie

3 Guiding Principles of Church Homepage Design



These are the benchmarks that I am constantly using to keep myself on track in the ever-changing world of church website design, redesign, and maintenance.


1. Your Homepage Needs to Give an Accurate Representation of the "Feel" of Your Church.


When I land on my homepage what's my first impression? Does this impression remind me of life at my church? What design elements can I use to capture that unique feeling?


When it comes to communicating what it's like to actually go to a church, I've found that real photos and real videos are most important. A picture of your people is worth a thousand stock photos.


Until our media team gets a little stronger, I've opted to use a quality drone shot of the campus as a header and smaller, color-filtered "still action" photos of the people at Unity below the header (pictured above). I've made an effort to keep all four "still action" people photos visible on landing so that the campus itself isn't overemphasized.


Pictures, colors, and page layout are just some of the elements that great church homepages use to communicate the "feel" of their church.



Good News Church puts the smiling faces of their people front and center along with their testimonies and stories to great effect (pictured above). Finishing a green-screen studio to replicate this effect is one of the media team strengthening projects mentioned earlier.


2. Your Homepage Needs to be an Extension of Your Church's Ministry/Communication Structure.


Visitors should be able to quickly understand your church's ministry priorities (the things that your church puts the most time, money, and energy towards). The language used to describe these priorities needs to be clear and consistent throughout all of your church's communication (starting with church staff and going through ministry team leads, the rest of the church body, on-campus material, social media, email etc.)


Great church homepages give an easy-to-grasp impression of the different categories and contexts of your church's ministries.




I've found that 3-4 context categories work best (in Unity's case we have "Service, Life Groups, Serve Teams, and Loving Beyond"). I've tried to maintain a version of these categories across all of Unity's communications (see bulletin picture below). I've also found it helpful to use a color-coding system whenever possible.





3. Your Homepage Needs to be Easy to Update.


Great church homepages use a consistent visual structure that rarely changes. For example, many church websites use a layer-based sectioning system. This allows for data (pictures, videos, and text) to be updated without redesigning or moving structural elements of the webpage. It also translates well to mobile view.



Notice how Life.church (pictured above) has card sections stacked on top of each other (Messages, Worship, LifeGroups etc...) with linked media sliders placed on top of each layer. This allows them to update their messages or worship slider without having to redesign the page or mess with the visual structure of the site.



At Unity, I use sections that only need to be updated with an image once every sermon series (about once a month) or sliders that automatically update through an external link (see messages below).



Because the messages, event, and calendar, sections/pages need updating so often, they are a top priority for finding a low-friction solution. I've found that a combination of integrations works best for managing these sections (mainly Youtube and GoogleCalendar).



Got any questions on web design/management (church or otherwise)? I'd love to hear them!


Got any communication structure wins that you're particularly proud of? Let me know!


P.S. If you'd like a detailed, data-backed formula for designing or evaluating a church homepage, take a look at this article by the fine folks at Nucleus (ProChurchTools) https://www.nucleus.church/blog/church-website-homepage/

5 views

©2020 BY VIVIDWORD

  • Facebook
  • Twitter
  • YouTube
  • Pinterest
  • Tumblr Social Icon
  • Instagram