Creating website wireframes is the step we skip far too often when designing a new website. It’s easy to get excited about picking colors, style and a fancy new look, but it can be hard to get passionate about a bunch of empty black and white boxes on a sheet of paper.
But wireframing may be the most important step any organization can take when putting together a new website. It helps you take your sitemap, a list of features and categories, and give it some shape. Here’s an example of what a church website wireframe might look like.
The first thing I like about the wireframe process is it makes you think like a website user. It forces you to answer the questions: What do I want people to do when they come to this website? Who is coming to this site? What are they looking for? What are the most important things I want this website to do? How much real estate should those things get?
Once you have those questions answered, wireframing lets you create paths that will get users to that information. If you’re a church, for example you want to make sure there’s a clear way for potential guests to learn about your church. What is a typical service like? What time does it start? Can I wear jeans? Where do I drop off my children? Can I watch a video sample of worship service so I know what I’m in for? You can’t (and shouldn’t) put all that information on the homepage, but how do you get people to the sub-page that has all that information?
As you’re wireframing you might decide that you want a box or button that says “New to First CRC?” And once someone clicks they’re directed to a page with the stuff listed above.
Likewise you’re going to want to look at other navigational paths for other groups of people coming to your site. What’s the path for a member? What are they things they are looking for and how are you going to get them there?
Even if you’re using a template website, wireframing can still be a useful process. Draw the layout of the template and where you can add content. Determine how you are going to use the spaces available to you to best share the information you have for various people coming to your website.
Did you use wireframing when designing you church’s website?
Comments
Wireframing also keeps everyone on the same page - as they say, "A picture is worth 1,000 hours of meetings with your web developer."
Jerod, I thought of your article on wireframing when someone I was working with used the software program/app called balsamiq (like the vinegar but with a q instead of a c). If you or someone reading this does a lot of wireframing, this could be a very useful app. And for nerdy people it's very fun! Check it out! :)
Let's Discuss
We love your comments! Thank you for helping us uphold the Community Guidelines to make this an encouraging and respectful community for everyone.