To Build a Church Website, pt 4: Design for effectiveness

So you’ve decided to build a website, and you’ve already got a hosting provider and toolbox lined up. In part 4 of our To Build a Church Website series, we’ll actually start the work of building a website by designing the thing.In part 3, we mentioned that design is a whole lot more than just the way a site looks. For a site to be truly effective, I am a firm believer that every aspect of it must be thoroughly designed, from the way the information is organized, to the way the site looks, to the things that people will be able to do when they visit. This means that, before we ever put a page up on the internet, we sit down, think about our website, and make a plan. Then we sketch out a few rough layouts, simultaneously thinking about what will go where and what will do what. And then we lay out the entire thing in detail by creating a final design which will effectively serve as our blueprint.

So let’s get started.

The first thing we’re going to do is pull out a piece of paper and brainstorm to figure out who we are, who our website’s primary audience(s) will be, what we want to put out there for everyone to see, and what our users will expect and/or desire to see when they come to our site. Maybe your church has a mission/vision statement, ministry philosophy, organizational flowchart, etc. That’s great. You’ll want to have that stuff handy because that’s the stuff that you want to communicate, and your website should reflect it all in the way it’s organized and built. If you don’t have it on hand, you’ll want to sit down and figure it out because you can’t build your church’s website until you know who your church is and what it’s called to do. Once you’ve got that in order, you want to sit down and think about your target audience, also known as your community. Are they rich or poor? Is there a particular ethnicity to them? Well educated? Home owners? Families? Young? Old? All of these questions need to be asked because they will affect everything from the pictures you use to the content you post to the functionality that you’ll need to offer on your site. And remember, at this point in the game, EVERYTHING is possible. Don’t limit yourself by, “Oh, well, we can’t do that” because chances are you can! If you like, I developed this worksheet to help me work through this process. And if you want to see what I came up with for our church, you can download my finished worksheet.

Now that you’re getting an idea for what kind of stuff needs to be on your site, it’s time to start thinking about a data structure. Basically, this is a map to locate all the stuff that will be on your website. Think of your website as a commercial district. The best place to be is right on the main drag. Being a door behind that isn’t terrible, but two doors off the drag, people start to thin out. Your data structure, then, should have the most important information that users are going to be looking up front, one click off the front page. More detailed, less used information can go two clicks down, and so on and so forth. Start working on your data structure now because it will affect other portions of your design, but don’t worry if you’re not ready to finalize it right now.

Once you’ve finished thinking about all of this stuff, you’re ready to move on to the actual appearance phase. When I design a layout, I like to have something to go off of, usually a logo. So when I began dreaming about this site, I sat down and started sketching logos. The trick, I have discovered, is to just sketch. Fast. And keep sketching until something jumps up and hits you. I did three renditions in less than ten minutes. I then picked two and moved to Inkscape, tinkering until I came up with what I had actually envisioned for both. Finally, I picked the one I liked most and sent it to a handful of people to get some thoughts. When the comments came back, I tweaked it just a little bit to satisfy the most consistent suggestions. And to the right, you can see what I finally came up with.

With logo in hand, you’re ready to do some layout. Usually, I start on paper with boxes and colored blocks representing different things. Again, the objective is to sketch fast and furious until you find something that really says, “Hey!” This might take ten minutes, or it might take ten days. As you go, you’ll want to make sure that you’re marking up your layout sketches so that you can remember what you’re thinking will go in each area. That way you will be able to make your mock-up look as realistic as possible, and more importantly, you can know what kinds of functionality you need to develop between now and the time that you actually deploy. Once you have a layout that you like, it’s time to start laying it out on the computer. Generally, I use Inkscape to flesh out the layout and play with colors. And as I create the layout, I do so with a few basic rules that you’ll do well to obey as well.

• Of late, I’ve been designing with an XGA (1024 x 768 pixel) screen in mind, but it’s always important to remember that you’re not guaranteed that your user will see that whole space for a couple of reasons. Number one, the browser has scrollbars and borders which steal real estate. Number two, if some people leave their screens at default resolution (which we know they do), Windows XP users will only have 800 pixels in width to work with. And number three, you have no way to guarantee that the user will have their browser maximized, so you could be dealing with a window that is actually much smaller indeed. So I usually make the page 980 pixels wide and assume that the user will need to scroll to see the right-most portion.
• Grids are your friends. Inkscape provides a little feature called guide lines. Essentially, these allow you to create a grid to guide the layout of your site. This is important because the grid allows you to develop a balanced, modular design. And also because the more irregular your page is, the more markup you’re going to have to write. That means your html files will be larger, and it will hit performance later. Usually, I set up a grid with four or five columns and assume that the right one or two columns will be off the screen for lower-resolution users.
• Pictures are a double-edged sword. Choose them wisely. This is true because, while pictures can bring an element of beauty into the design, they also increase the time it takes for a user to see and actually use your website. A few things to remember when it comes to pictures are: there are different formats for a reason. Get to know the strengths and weaknesses of gif, jpg, and png formats. Force yourself to crop and resize pictures to fit the space you’re trying to fill. And make sure to utilize compression when saving your images. Also, of special note for a church website, please make sure to remember that your church is not about artsy stuff, pretty scenery, or even your church facility. It’s about people. Make sure your pictures focus on people, too.
• Always remember that, at the end of the day, users who come to your website are looking for content. Truly, content is king, and nothing about your design should distract from that. In fact, you should do everything in your power to highlight content, especially stuff that’s fresh and new.
• Don’t be afraid to start over.

With these rules in mind, I sat down and started sketching. Because I like to think that our church is pretty simple (in a good way), and the logo that I designed earlier has what I like to think of as a  clean feel, I decided to minimize the pretty pictures on the site and go instead for an exceptionally clean layout. I came up with a series of possible layouts, which I’ve scanned at left to give you an idea what I’m talking about. If you follow the link to the full-size version, you’ll find that I made sure to label key parts so that I could know what I was doing when I went back, even days or weeks later.

I chose to expand on the third in the series, and so created this in Inkscape to flesh out the details of the design. When I showed it to a couple of people from the church for input, though, the response was rather underwhelming. One person suggested sending it off to a graphic designer friend for tweaking. And my wife said it looked a lot like another site I built recently.

So it was back to the drawing board. This time, I picked the last sketch on that page, and this is what I came up with in Inkscape. A few things to note are that the black boxes represent pictures. On the right-hand side, the gray box will be a static map that users can click to visit an interactive map where they will be able to get directions and more. And below that will be a handful of key links for prospective guests, recent news, and upcoming events at the church.

And there you have it: a design for our new church website. In the interest of full disclosure, it did take me several days to write this post. And it actually took a couple of weeks to work up a design, solicit some feedback, and so on and so forth. But actually, to be honest with you, I would rather make sure that the site is designed right here and now than build the rest of the site out only to find out that the design was terrible.

Speaking of building the rest of the site, now that we have our design, it’s time for the part that I like best: building the site itself. We’ll get started with the heavy listing in part 5.