Ekklesia 360

7 Design Trends for Church Websites in 2018

Posted by Samantha Decker



We know that you already know this, but because it's so important we'll say it again: it's incredibly important to have a functional church website.

But the design of your website is equally important—it should help visitors know what to do when they get to your site. So while you may think your site is perfectly functional, if users have a hard time navigating it, there is a pretty good chance they won't be spending much time there.

Besides having a church website that's functional, user-friendly, and easy to navigate, it also needs to be visually appealing. It should look professional, and represent a community where someone would want to hang out and spend their time—just like your current church members.

But we get that it can be hard to come up with a design that does it all. Of course, it doesn't help when design trends change on a fairly regular basis. To help you keep up with the ever-changing design trends, and to keep your church website from looking outdated, here are seven relevant design trends for church websites in 2018.


Modular Design

When something is designed with standardized units that can be put together in a variety of ways, it is defined as being modular. Now, you may be familiar with modular furniture, and believe it or not, that design works in a similar way when it comes to websites. If you're not understanding how this concept works with website design, think about having reusable components, that when used with other modules, can be used to construct a complete webpage—almost like a drag and drop. So instead of using a selection of simple sections to use content to fill the set space, you can rearrange and redesign the web page to suit the current content.

For church websites, modular design can be used to break up background space with color and photos to form a home page, primary landing pages, and even special event or ministry layouts.

See this great example from Green Bay Community Church.



Mobile First

We've said it before and we'll say it again: it's no longer an option to have a church website that isn't mobile-friendly. Unfortunately, many websites—church or not—still aren’t mobile-friendly!

In this day and age, you can pretty much guarantee that when a person is checking out your church website, they are doing it on their phone.

We don't think you need any more persuasion, but just in case, here are some stats that go along with the importance of mobile first when it comes to church website design:

  • The number of cellphone users in the United States reached over 237 million in 2017
  • October 2016 was the first time when more people accessed the web with their mobile device rather than their desktop computer

Yet another reason to incorporate this design trend is that by focusing on mobile first, it can actually make for better website performance and faster load times.

Biltmore Church has a fantastic mobile-friendly design—check it out.



Bold Bright Accents

Church websites are still leaning toward being mostly neutral with a lot of images, but there is definitely also more oversized typography, bold font choices, and some brightly-colored accents. Using bold bright lines, marks, buttons, and other accents are great for drawing the eye to specific elements, but, you probably want to stay away from using too much brightly-colored text and backgrounds. It can get pretty tacky-looking in a big hurry.



Gradients and Color Transitions

If you’re looking for an effective way to break up content, using gradients and color transitions is a design trend that can work really well. When paired with background images, gradients and color transitions can make your church website really stand out. In order to incorporate this design trend into your church website, try the following:

  • Use gradients for backgrounds, headers, and overlaid on photographs
  • Use neon-colored gradients (or pastel ones especially when promoting your 2018 Easter services)
  • Combine gradients with geometry for a modern-looking 3D effect

When using gradients and color transitions, they are great for grabbing attention, but they shouldn't be used with content that requires the user to maintain their focus.

Screen Shot 2018-01-09 at 10.27.47 AM.png


Animated Logos

You've heard of using certain types of animation like videos and GIFs on your church website, but the latest design trend includes using animated logos. By including an animated logo on your website, not only will it be attention getting, it can give visitors the idea that your church is fun, vibrant, and growing.

Because animated logos are more memorable than static ones, they can be extremely effective when it comes to promoting awareness for your brand. And if you might think that branding is only for businesses, it's important for churches too.


Scalable Vector Graphics

While Scalable Vector Graphics (SVGs) and responsive techniques have been trending since 2014, SVG images will continue to be extremely popular going into 2018. In fact, they will even begin to replace more popular file formats such as PNG and JPG. One reason being is that SVG images can be scaled to any size so that they fit on various webpages.

Remember how we talked about mobile first? Scalable Vector Graphics allow images to look just as good on a 32-inch desktop monitor as they do on a tiny mobile device. Using SVG, your church website's graphics, icons, and logo will look pixel perfect no matter the resolution or screen size on which they get displayed.




Bottom Sticky Elements

When you are scrolling up or down on a website, the portion that stays in a fixed position is considered the sticky element. It's common to see websites with top sticky elements, or fixed headers. The design trend for 2018, however, is all about using bottom sticky elements, or fixed footers. Why the change? Again, it goes back to being mobile friendly.

Because website users are becoming accustomed to clicking at the bottom of their mobile apps to navigate, it makes sense to have sticky menu items scroll from the bottom as opposed to the top. If you want to keep certain content on your church website (like a navigation menu or a banner for an upcoming event) in front of your visitors at all times, you can incorporate sticky elements. If you want to be trendy about it, or if you know your visitors are more likely to view your website on a mobile device, go ahead and include bottom sticky elements. 

Topics: Design, Featured


Leave a Comment