Design Ideas for CS3 Site Designs


We’re right in the heart of designing our new site designs for Clover Sites 3. We’re aiming to launch with (at least) 10 pre-designed sites.

This is definitely one of the more fun parts of my job… I love creating sites with just enough room for you guys to make them look unique to your organization, but with enough structure that you feel empowered to not have to be a designer to make them look good.

My typical process is to scour the web for great site designs, and then take the ideas/formats/concepts I like to begin forming new structures and layouts for you all to work within. But a little confession: I rarely look at church websites for inspiration. They tend to be pretty ugly. Maybe I’m just not looking in the right locations or whatever… But I typically find inspiration from non-churchy sites.

Here’s a couple of hubs I look at for inspiration:

Best Web Gallery  /  CSS Design Awards  /  Awwwards

All that being said, I really want to hear from you. Do you have any site designs that you look at and love? Or do you have aspects of different sites (whether it be fonts, layouts, vibes, or even mobile experiences) that you’d love to see on future Clover websites?

Let me hear from you… Post links and info in the comment section below.

  • http://www.ecg.org.au Max

    Rockpointe, please! :)

  • http://www.cloversites.com Jim

    Do you have the URL for the Rockpointe site you’re into, @Max?

  • http://hptulsa.com Brian Jennings

    Being able to incorporate a blog post, news item or special update would be great.

  • http://www.covenantheights.org Jesse

    A couple I like are ijm.org or peterbradleyadams.com. I am attracted to the websites that move from one tab to the next as you scroll down as these both do and there are many out there. One of the fastest growing template business is http://www.squarespace.com/templates/ they have a great look, navigation, feel and mobile optimized

  • http://www.cloversites.com Jim

    Oh… I think you were talking about the current Rockpoint design. No prob. We’ll make one close to that vibe!

  • http://www.cloversites.com Jim

    @Jesse – Thanks for the suggestions. What’s cool, is that you’ll be able to get super close to both the IJM and Peter Bradley Adams site with current designs we’ve already made. I do like the way the IJM site handles the logo during scroll. Maybe we’ll use that concept for a new design. Great suggestions. Oh, and yeah- for the right type of person it seems like Squarespace can be pretty great. Thanks again for the input!

  • http://www.valecc.org Kyle

    I just wanted to start off by saying that we have been using Clover for years now and have loved it. I am excited to see what the new HTML5 sites will offer and how they will compete with the clean and subtle designs of square space. Im sure you have heard this time and time again but I would love to see full browser integrated images, embedded videos from sites like vimeo, and more room to edit and design with our own choice of fonts and colors. Will you guys be offering any templates that look and feel similar to these?

    http://www.squarespace.com/templates/?q=marquee

    http://www.squarespace.com/templates/?q=aviator

    http://www.squarespace.com/templates/?q=adirondack

    Also, we love clover donations. It isnt perfect but for the price and accessibility it cant be beat. We are really excited where you guys will bring it! Thanks!

  • http://www.cloversites.com Jim

    @Kyle – Thanks for all the props!, Your site looks great… Thanks for sticking with us through the years. And thanks for the compliments about Clover Donations. That thing will only get better after launch of CS3.

    We’re totally planning on having the capability of having sections/galleries/images take up the full browser (depending on which site design you choose), as well as having the ability to embed videos from Vimeo/YouTube/etc. and still have them look awesome. And I’m not sure if we’ve mentioned it previously on the blog, but you’ll totally have the ability to change fonts and colors. You’ll have way more control in CS3 then you currently have if you want it.

    Those Squarespace templates are great. Not only do they look super clean, but the mobile versions of those designs look good too. We’ll totally nail that aspect in CS3. Some of the hard things about Squarespace templates is how photo-heavy/dependent their site designs are. Their demos look beautiful, but when I’ve tried to make sites out of them I’ve found the simplicity to be a bummer if you don’t have beautiful photos. That being said, I love the way the Marquee design handles background images. We’ll definitely do a design (or designs) with that interactivity. I also liked the way the Adirondack template handled the logo on scroll. Oh, and the big, full-browser background image on Aviator.

    One question regarding that background image on Aviator for you, Kyle. Would it be ideal for you if we gave you guys a background image as part of the site design (or even 3-4 background images to choose from) if you chose a site design like that? We’d obviously give you control in the HTML to change it, but what if part of the site design was that you had to select which generic image to place as a background image? This way most people would be guaranteed that their site’s background looked beautiful. Too limiting?

    These are great suggestions. Keep ‘em coming!

  • mike

    Will the new sites have the ability to add articles/pages beyond a certain number?

  • http://www.valecc.org Kyle

    Thanks for getting back to me so soon Jim! Im really liking what Im hearing about for all these changes.

    When it comes to a design like Aviator, we personally would love the option to place our own high res photos as the backgrounds. Now I do understand not every client would have the opportunity to do this so having stock images as an option would be really great for the masses.

    Like Jesse said above it would be really great to have one or maybe two template options where you move from one tab to the next as you scroll down the page. I really love the clean look of the Marquee template that has this option. This might be a tall order or request but would it be possible to have some sort of beta release of the new templates that us users could play with and add and drop images into to get the feel? Thanks again for everything you guys do!

  • http://www.cloversites.com Jim

    @Kyle – Thanks again for the feedback. Re: Aviator design… I think I know a way we can pull off the best of both worlds (where you can upload your own, and others can choose from a selection) within the new Greenhouse. I’ll chat with the dev team this week to make sure we can pull it off. In the meantime, I’ll make sure we have a site design or two for launch that have the option of a large photo background for the entire site.

    As far as the scroll/locking thing- That might be a little more tough, but I don’t see why we can’t do it. The big problem of us vs. Squarespace is they tend to ditch the “ease of use” of their CMS when it comes to controlling these options (ex: it’s easy to drop wrong-sized images in as full sections, then have it show up super ugly and pixellated on the live site), and we try to really do our best to not allow that sort of thing to happen (like you said, “for the masses”). But if it can be done and still be easy to make look good as a normal user (which I think it can), we’ll for sure do it.

    Thanks again for your input!

  • http://www.cloversites.com Jim

    @mike – You’re going to have an unlimited number of pages you can add to your site in CS3. We’re definitely going to recommend to limit how many pages based on which site design you use, simply because at some point having too many pages will just make your site look really badly… But if you need more, you’ll definitely be able to add as many pages as you want.

  • http://www.kkmunchained.org Niral Burnett

    The consistent updates and ball-park time estimates are helpful. Thanks!

  • Darryl

    When it comes to photos and background photos, I’m curious if any of you (Clover and those who have posted) know of any sites that offer high resolution pictures for church websites. I’ve searched and haven’t been impressed with what I see.

    I know it would be a big task, but what is the possibility of Clover having a pool of amazing photos that site owners would have access too? Down the road that is! :)

  • http://www.cloversites.com Jim

    @Darryl- I totally get it… That’s a huge deal for most churches. The best “churchy” stock photo place is by far Lightstock. They’re a couple of great guys and do good work. iStock is decent too, if you know exactly what you’re looking for… But some of the photos of people are super cheesy and canned.

    My best suggestion (which is what we do for our demo pics) is to hire (or just ask) someone in your church to spend some time getting shots of your people, space and city. I know it can be risky, but having ok authentic pics (in my opinion) most of the time is way better then having great, generic photos. And best of all, typically photographers in your congregation will do it for the church for free! I would see if you could get multiple people on assignment if possible.

    As far as including some photos in CS3, we’re not exactly sure just yet. Some sites will have a background image that comes stock with it, and we’ve been planning
    on possibly including multiple choices within that site design. So we’ll see… We’ll definitely have a clearer answer on that closer to launch.

    I’m thinking on doing a blog post on this very subject in the future, so thanks for the question.

  • http://csucru.com Tyler

    I recently was surprised by Whistle.com’s homepage. The way they transition from section to section is genius. Also, I stumbled upon a creative aspect of the website universalcycles.com at the bottom where they have an icon that “follows” the mouse location. Just clever ideas that could be useful aspects of designs you guys make. Excited to know that before next year, we’ll likely have a shiny, new site thanks to your guys’ hard work!

  • http://www.cloversites.com Ben

    Thanks Tyler. We love animated sections like the ones on Whistle.com. We did them for our hiring page a while back, and we’ve been inspired by a number of them on other sites – recently http://www.apple.com/your-verse/elevating-expedition/

    I like the little road bike guy that follows your mouse location, too. Little touches like that are awesome. Thanks for the ideas!

  • Darryl

    I like this site layout and the way if flows. http://purplerockscissors.com/

  • http://www.cloversites.com Jim

    @Darryl – That’s a beautiful site… I love so many things about it. Tons of inspiration there. Thanks!

  • http://www.wordoflifekc.org Reggie

    http://www.nba.com/sixers/?ls=iref:nba:gnav
    I like how you are able to hover over pictures, and it gives you options to share with different social sites

  • http://www.cloversites.com Jim

    @Reggie – that’s cool. Maybe we could do that with a special type/designation of photo space in the future. Thanks for sharing!

Easily Stay Updated

Have posts delivered directly to your inbox.

or, just get our RSS Feed

Search By Category

Find posts by product name or topic.