Freshly Launched Church Website!

We just launched a new site for my church. I’m excited to get them on Webflow simply because it will open up so much possibility for them linking up through Zapier and stuff. I’m excited to try out some clever integrations. I’d love to hear some ideas if you have any!

https://webflow.com/website/Blocky-Church-Website
https://avalonchurch.webflow.io

2 Likes

Block Church

  1. Home Hero Image: Make homepage hero image height: 100vh. So it fills the landing viewport.
  2. Home Menu: Adjust main menu background colors lighter. Make white with nice pastel colors. The landing image is fabulous! The menu should follow an upbeat higher color.
  3. Footer: Adjust text color to fit main menu pastel color. Try light baby blue, fuschia, coral, light pink, light orange.

Our Beliefs

  1. Remove grid outlines. Use subtle shadows. Here are some examples of it.
    https://stripe.com/
    http://lightbridge.io/?ref=lapaninja
    https://www.scaleapi.com/
    https://csspeeper.com/?ref=lapaninja
    https://newtonhq.com/?ref=lapaninja
    https://www.gethue.co/?ref=lapaninja
    https://www.airbnb.com/work?ref=lapaninja
    https://www.netguru.co/gititback?ref=lapaninja
    https://gorgias.io/?ref=lapaninja
    https://www.slydes.co.uk/?ref=lapaninja

Our Leadership

  1. Adjust the height for all the cards so they’re the same size. You can use Flex, Expand for that.

Final Thoughts
The site is really organized and looks good. Remember, you don’t need a header image for all the pages. Only on the home and maybe one more. But all the other pages, just remove the header image and show the content, otherwise the site will begin to look “too basic, too blocky”. You can definitely add creativity for each page.

Let’s say you get a color scheme with 4 colors. Then each page can have a “theme” with a specific color. Gives user an eye-popping perspective as they navigate the site.

Your website IS your store - or - house! What if your house had 1 color for ALL the walls. Same color for all the furniture. With no plants. No paintings. No pictures?? You see what I mean. That house has no character, no personality.

Take the user on a journey through your client’s personality, they should feel them. Here are a few color combinations that work well for viewer’s eyes. You can lighten or darken with %'s in vector program.

Background: FAFBFD
About Us: A57BCF, 1BB991
Watch & Reed: 9748D4
Ministries: EF747C
Events: 7E97DE, 203646

Other than that, I’d mix up the design to add more personality without so much black. Add white spacing between section transitions to give these colors room to breathe and shine! :grin:

Hope this helps add new perspective. Take care.

1 Like

@garymichael1313,
Thanks so much for your detailed critique! I love hearing others impressions of my work.

I wanted to address a few of your points and hear your thoughts.

  1. I know it would look better for the homepage hero to be 100vh, but I wanted it to be clear to the user that there was more content on the page. I didn’t want to use an animated icon for that because I believe that if the UI can explain itself, then it should. Anyway, given that as a requirement, would you still change this section?

  2. The colors on the site are following the churches brand guidelines. With them having that orange color in the guidelines (useful for primary actions or drawing the users attention) I didn’t see the need to introduce additional colors to their identity. When do you find it appropriate to break from your client’s identity when choosing colors for the UI of their site?

  3. For the “Our Beliefs” section, is there a reason you would use the subtle shadows other than stylistic preference? I’m not against going that direction but I’m curious to hear more about it.

  4. The height of the profile cards in the “Leadership” section was hard because some of the people don’t have images available yet. I didn’t want the cards to have an empty space at the top where the image would be, so I opted to make each card look balanced on it’s own. Still open to advice here.

  5. I like your ideas at the end and your analogies to decorating a house. I chose to use lifestyle imagery for that very reason. It sounds like you’re suggesting that I should take down the pictures from my “house” and replace him with a new coat of paint. That seems counterintuitive to my objective of “adding personality” to the site. What are your thoughts?

Thanks again! I look forward to your response!

#1:
Absolutely! It just looks professional when you don’t have viewport hanging edges. Definitely do this.

#2:
If their primary color is black, use subtle pastels to create more character. Try not to use definitive absolute colors, if you know what I mean. Deep solid blues, greens, reds, etc. Instead use lighter variations:

color-palette-template

You can use these lighter variations as “Character, Highlights, Subtle, Accessories”. This wouldn’t be changing their color scheme, it just adds to the flavor. You can see where the arrows are pointing. Choose subtle tints on the 3rd or 4th row. The first three are those absolute colors I was referring to. Refrain from using those first two deep, deep color rows, they’re way to imposing and drown out text and personality.

#3:
Shadows allow the eyes to smoothly read much better. It takes user away from the Excel spreadsheet looking grids. You want these grids & blocks to float on the page, not implanted. Add subtle shadows throughout and let the “Text” do the talking. Here’s where you can use these “Pastels on text sitting inside a white/grey shadowed box”. The text with character, not the grid.

#4:
Use placeholders. When a team member is missing add something like this:
placeholder-1

#5:
Hahah… you’re too funny! I like that … Not taking down pics for paint. But why not use their personality as a background instead of a full color effect. Gradient vectors with “Slight Patterns”, like this:
background-1background-2

Use a vector background and fade it out, then put “Text or Branding on top”

See ya.
G.J.

2 Likes

Here is a great example of subtle backgrounds and small headers without full images:

https://iconspace.co/

1 Like

1 Like

where’d you get this.
I like it.

From the vector program. I opened the color palette creator. It gives synchronous options from the base color. I screen captured, saved individually, then added all into one file. Send me a message to my profile with your email and I’ll email you the Affinity file.

1 Like