Ekklesia 360

Church Website Design 101: How to Choose Images, Colors, and Fonts

Posted by Janis Jack

January 18, 2018 7:10 AM

    

Ekklesia-church-website-design.jpg

When members visit your website, what kind of first impression do you want to make? Most churches have an established branded style, but sometimes it’s not always clearly defined. With a new website, you have an opportunity to define the visual look of your church brand using images, colors, and fonts. When your church website design conveys your brand it can better portray who you are as a church, which can make for a better overall experience for your website viewers.

Images

People respond quickly to images used on your site, and often establish a first impression based on your photos. It is not always possible to use pictures that are taken in your church. Sometimes it is best to use stock photos for your website to portray professionalism and quality that you may not have access to in your ministry. You can get beautiful stock photos for free from a number of stock photography sites. A few of my favorite go to sites are Unsplash and Freely Photos which are christian-based and high quality. Some churches may be hesitant to use stock photos, but your website can really shine if the images are high quality. Even if the image is just of a tree or a scenery, it can still accomplish the feeling you wish to convey. Here is a full list of stock photography sites that are suitable for churches.

 

choosing-church-website-colors.jpg

Colors

The use of your church's logo is equally important on your website. Most logos require a few color variations to ensure the logo can be applied across most mediums. Color is one of the biggest determining factors in creating a memorable website and brand. What is your church about? Is it young and friendly? Is it about trust and dependability? You can use color to communicate your church’s personality and evoke certain emotions and feelings in your audience. Whatever colors you decide to use for your brand, make sure they’re consistent. Start with 2 to 3 main colors and build from there. Here is a list of basic colors and what they mean in the advertising industry:

  • Red = Energy, Excitement, Urgency, Hunger, Passion
  • Orange = Aggressive, Energetic, Creative
  • Yellow = Optimistic, Youthful, Positive, Innovative, Happy
  • Green = Wealth, Relaxation, Natural, Youthful, Calm
  • Blue = Trust, Security, Professional, Powerful
  • Pink = Romantic, Feminine
  • Black = Powerful, Sleek, Strong, Professional, Firm, Masculine, Luxurious
  • Purple = Soothing, Calm, Spiritual, Loving
  • Brown = Natural, Safe, Reliable

You will want to choose colors that contrast well. If you have a light colored background, use a dark font. Choosing your site's colors is an important step to establishing the personality of your online presence. Here are some tools and ideas to help:

 

typewriter-font-church-website.jpg

Fonts

Some churches have a standard branded font that is used often throughout the church. Much like color, using those same fonts in your website will bring cohesiveness to your brand. By simply picking the right font design for your site, this “small” change can have a meaningful improvement for your church website.


Different font styles can communicate different subconscious messages to people. This can help you further build-upon your brand identity. Believe it or not, specific font styles can convey different messages such as trust, stability, strength, sophistication, creativity, etc. Select a font or set of fonts that work seamlessly together.

The type of font design you pick says a lot about you, your church, and what your website is all about. Using too many fonts makes your brand style hazy and hard to identify. Fonts are a great way to express your church’s personality. If you’re a younger church, you might use some of the trendier fonts. Also, keep in mind that you don’t have to buy an expensive font family. You can use web fonts offered online through sites like Font Squirrel, Google Web Fonts, and Adobe Edge Web Fonts.

Select a font for readers. A font design might look nice, but if it doesn’t fit the purpose, don’t use it.

If a font combination is working and is web-safe, then stick with it. Pick a typeface that is appropriate for your content and context that is web-ready. Also, focus on picking a font design that has the characteristics you want to represent your website and brand. There are five main types of personalities when it comes to font designs. Consider which personality you want to represent your church:

  • Traditional, Respectable, Comfort, Reliable: You want to choose fonts that have a traditional heritage like Trajan, Georgia, Times New Roman. Since most people are very familiar with these classic font designs, they instantly give off the impressions of heritage, reliability, and trust.
  • Contemporary, Modern, Minimalistic, Progressive: You want to choose a font with clean lines with a thinner weight that have a minimalistic design like Nunito, PT Sans, and Open Sans . This gives off a sense of modernism and progressiveness. These are fonts with very clean designs and has less handwriting qualities. They often have either very bold or very thin profiles. These designs tend to have less personality so they appear more modern. If you want your website to give off a more contemporary feel, then consider using this type of font design.

  • Strong, Stable, Defined: You want to choose fonts that have a blocky design like Mission Script, Oswald, and Raleway. The boldness of the font designs give the design substance and give off the impression of strength. If you want to make a statement or want to appear robust, this is the type of font you should use.

  • Delicate, Elegance, Beauty, Vintage: You want to choose a handwritten-type font with lots of curves like Allura, Pacifico, and Great Vibes. The curves are what give the designs a romantic and elegant feel. Not all handwritten font designs are romantic, they can also be quirky and free-spirited. The more italic and curvy the font design, the more vintage it will look. The rounder the font design, the more quirky and retro it will appear to be

  • Themed Font Design: You want to choose a font that does not fall into any specific category like Josefin Sans, Annabel, and Museo. They have various characteristics and so it’s hard to cover all of them. These font designs are handy if you want to create a unique brand identity. It will require more design skills to pick out the right design since all of them are very specialized.

Furthermore, consider what kinds of web fonts will function best on screen. Sturdy sans serifs usually work well. But they also need to have proportions that are suited for reading in small sizes. A sans serif font is a category of typeface that does not use serifs. Serifs are the small lines/accents at the ends of characters.

Whether you choose a sans-serif or serif font (or any variation in-between), make sure that your audience can read your message. If you are interested in changing the fonts on your website, you have a couple of options. Google Fonts provides free open source fonts. You can search for font families, select your preferred styles, and then copy the code from Google Fonts. Send the code to customer support and we can add it to your website free of charge. Here is a guide on how to get the Google Font code added to your site.

You not only have a choice of what font is used on your site, but on how that font is arranged. When arranging your font on your site, place the most important elements in the biggest fonts. Make sure that you’re getting your most important message across first. In order to guide the reader, headings are usually large, sub-headings are smaller, and body type is even smaller. Size is not the only way to define hierarchy. It can also be achieved with color, spacing, and weight. When designing with images, always place your text within empty copy space. This will make your message easily readable, easily digestible, and ultimately more shareable.

When your website images, colors, and fonts reflect who you are as a church, it can make for a better overall experience for your website viewers. With your new website, you can better define your church branding style if you do not already have one.

 

Next Steps

If you're looking to spruce up your church website or redesign your website entirely, download our Church Graphic Design Kit. This kit provides free graphics and tips to help you improve your graphic design skills and create a beautiful, compelling website. Download this free kit today.

Church graphic design kit CTA horizontal

Topics: Best Practices, Design

    
 

Sign up and get articles directly in your inbox!

Leave a Comment