Years ago, when I maintained my church’s website (as a volunteer), I would get an itch to rework the design, but rarely had time for anything more than updating current events and sermons. Throughout the week I was working with churches to design their new websites and it would inspire me to apply new trends to my own church’s site. I would often have extra time between Christmas and New Years and freshening up the site as the year rolled over felt good.
It's so important to make sure new visitors can easily find key information, but also that your site conveys a strong message about how God is working and what it’s like to be involved at your church. Your site should tell a story and the design should be used as a tool to organize content and create feeling. Some design styles may feel too daring for your church, but I do think it's possible to take most trends and find ways to apply them to any church website.
Here are some design trends that we are seeing for 2020.
- Asymmetry
- Layered Shapes
- Custom Illustration
- Large Typography
- Bold Color
- The Personal Touch
- Simplified Navigation
- Robust Search
- Texture and Patterns
- Floating Card Content
1. Asymmetry
Asymmetry is defined as the lack of equality or equivalence between parts or aspects of something; lack of symmetry. Chances are your site is set up using a grid system and your content is set up in equal columns. Design is pushing the rules of these symmetrical grids to create layouts that flow left and right and leave open spaces for your eye to travel down the page. The balance of the design feels “off,” but this creates a really interesting look. Asymmetrical design feels more organic and I think a church site feeling alive is pretty great.
Trinity Episcopal Church Nola
Trinity Episcopal Church Nola has been working on a new site that highlights their mission by balancing content opposite large circular images which draws the user back and forth down the site.
Rockpoint Church
Rockpoint Church has used an asymmetrical grid to highlight featured content on their homepage.
2. Layered Shapes
One way to add depth and direct the eye is with layered shapes. Geometric and organic shapes can both be used to highlight images, important headings and build on your brand.
Wheaton Bible
Wheaton Bible’s new site uses some bold color and large angled shapes to make their site feel friendly and exciting.
Westside Community Center
Westside Community Center is using the Trotter theme which has thin asymmetrical outlined square background.
3. Images with Illustration
Rather than just using photos, brands are getting creative with custom illustrations that interact and tell a more interesting story. Custom illustration can be a huge undertaking to design, but what if your site had some simple artistic elements that create a feeling. Repeated patterns and delicate shapes can give a sense of movement and joy. Bold blocks of color paired with a monochrome photo can focus attention and make the design feel strong.
Get Inspired
 |
 |
 |
Left to Right: Symposium Concept Explorations by Johanna Villegas, Milton by Greg Perkins, and Akasha Hero Illustration by Frederico Teixeira Jesus
You Try
Check out these amazing resources. These can be a cool starting point for you to add to.
 |
 |
 |
 |
Clockwise starting at top left:
- https://www.humaaans.com/
- License: 100% free for personal and commercial use. Attribution required
- https://www.karthiksrinivas.in/charco
- Free: 16 illustrations in PNG file format. Free for personal and commercial use.
- For Purchase: Customizable Photoshop (PSD files)
- https://undraw.co/illustrations
- License: Free for personal and commercial projects. No attribution required.
- https://icons8.com/ouch
- Free: Vector Illustrations in a variety of styles.
- For Purchase: Customizable vector files.
Fun Typography
A website is no good if users can’t read it easily on all devices. If you look around at best practices, 16px san-serif fonts with standard width and casing are perfect for desktop and mobile, but what about grabbing readers attention and using typography in a more interesting way? Using bold and oversized headings can direct users and make your page content more scannable. You’ve got to be careful not to let the design impede the readability, the more artistic the font, the more simplified the heading should be.
Milestone Church
Milestone Church uses a bold heading style with a colorful underline to really simply what needs to be read on the page. Notice how you you can scroll down the homepage and get a good understanding of content quickly.
Fair Hope United Methodist Church
Fair Hope United Methodist Church is using bold and bright colors from their logo along with a handwritten font. Paired together this site looks fresh and friendly.
Get Inspired
Check out these Sermon graphics for more ideas.
 |
 |
 |
 |
Clockwise starting at top left: Greater Faith Weekend at Emmanuel CC, 6 Words That Can Change Your Life at Traders Point Christian Church, First Class: You've Been Upgraded at SeaCoast Grace Church, Kingdom Perspective: Philippians at Green Bay Community Church.
You Try
Check out Google Font’s collection of handwritten and serif fonts to create something that leads users to take action.
5. Bold Color and Gradients
One way to give a consistent feel to your site is to use color in a bold way. Try alternating backgrounds with a bold color block or subtle gradient. Photography helps visitors see a welcoming environment and envision themselves being comfortable. That being said, photography can be a challenge on time and resources. Try adding a monochromatic color overlay to all the photos on a page to polish it up.
St. Paul’s Preparatory
St. Paul’s Preparatory school uses a dark overlay on their main image links that hover to a green and black gradient. This makes image uploads faster because the overlays do a lot to make them feel consistent.
Church of the Incarnation
Church of the Incarnation has used the same bold gold color on each page’s header image. Each page feels thoughtful and on brand without having to do much work. Another benefit with this style is that text over the image is easier to read. Image backgrounds have been popular for a while, but so many applications create huge readability issues.
6. The Personal Touch
We want people to know that your church is a place where they can learn about God and connect with a community. Church is filled with people learning together, alive and feeling. So how do we present that relationship and feeling on a website? Clean and minimal design is great, but it can sometimes leave content feeling cold. Make your site feel more human by including design elements that feel more hand done like handwritten fonts and candid photography.
First Christian Church Johnson City
First Christian Church Johnson City created a summer blog of testimonies and recipes. What’s more personal than a meal?
Community of Grace
Community of Grace uses a handwritten brush font as main headings on their home. This works particularly well with their hero image, “Jesus makes us Family.”
7. Simplified Navigation
Church websites can often become overloaded with content. Between community groups, events, ministries and weekly sermons, a site’s navigation can quickly get unmanageable. It’s important to set up checks during the year to make sure content is up to date, but also to ensure that content is organized effectively.
First Baptist Lakeside
First Baptist Lakeside uses a mobile “hamburger” style navigation to organize their sitemap. Notice how their various life stage ministries under Connect are clear for everyone. Leave your youth group’s name out of the navigation, that’s insider language and it will make navigating tricky.
Westside Community Center
Westside Community Center has a more traditional navigation on desktop. Take a look at how simple it shifts on mobile. It's easy to use and the information is focused.
8. Robust Search
If you pair a robust site search with a simplified navigation, your users will be able to find what they need fast. The search should not just be a field, but also a feature that guides site visitors to better answers. Try including some key links near the search and present filtered search results before the user clicks. Location is also important. The header and main menu are the most effective spots to place your search. Don’t hide it, let visitors skip the scrolling and get to the announcement they just heard about fast.
Trinity Episcopal Church Nola
Trinity Episcopal Church Nola provides quick links and contact specifics to make their search menu really valuable for users looking to get in touch.
Grace Church
Grace Church has an oversized header and uses a smart search to provide filtered results so the visitor can bypass being redirected to search results.
9. Patterns and Texture
Trends come and go and thus return has me pumped. Introducing patterns and textures doesn’t have to mean your site looks like a scrapbook, but adding some depth and ambiance is a great way to inject personality.
Wesley
Sneak Peak: Our next theme Wesley uses a tiny dot texture to liven up the giving background.
Get Inspired
Check out these Sermon graphics for more ideas.
 |
 |
 |
 |
Clockwise starting at top left: House Builders at Church of the Redeemer, Modgnik at Traders Point Christian Church, Love Your Neighbor at Biltmore Church, Lit at Grace Church
10. Floating Card Content
This card style design was made largely popular by Material Design https://material.io/ (which came out in 2014) and the fact is, it’s still relevant today. Cards should contain information calls to action for one piece of content. The design’s grid can stack or swipe on smaller resolutions which means that design is very simple.
Denton Bible
Denton Bible uses a card style throughout their site. Their Media Library houses four types of filterable content. The card design makes it easy to browse and responds seamlessly on mobile.
Wesley
Sneak Peak: Our next theme Wesley uses a card design for events, articles, blogs and sermons. Images
