Let’s say that you’ve got an idea on how your personal pastoral blog or maybe your church’s website should be laid out and you have a insanely talented graphic designer or developer on board ready to tear things up!

But as you begin to collaborate, you can’t seem to find the words to articulate just exactly what you are looking for. So you suggest a few things, you mention some ideas, and you end up with this convoluted wandering.

Much like the Israelites moseyed in the desert with Moses, you and your amazing crew end up going back and forth, around and around.

This situation is very common in the development world and ends up generating a lot of “froth” wherein a strange and busy work forms. This work appears to look good on its own, but without that very clear and much needed defined goal, never reaches the culmination point.

Well let me be the first to tell you to stop what you are doing, quit wasting time and effort, because wireframing is the answer you never knew existed! And thankfully, ChurchCrunch is here to teach you how.

Wireframes? Mockups? What’s That?

The basic idea of wireframing or mockups is to create a drop dead, stupidly simple outline of what you hope to achieve.

Once you are finished, you have a very clear starting point for your team to move forward with. It reminds me a lot of the old printing presses. Where they would carefully lay the letters by hand, one by one, proof reading them several times.

Once they were certain of their direction and content, the printers would commit as they fired up their presses.

What If I’m Not a Designer?

Do you have to be a web designer, web guru, or nerdly lordling? Resoundingly the answer is NO!

as you will soon see, Mockups are actually meant to be the very opposite, meaning they thrive on looking rough and uncut. They are uncomplicated yet incredibly solid launching pads from which your idea can grow.

And with Balsamiq’s beautifully simple mockup software, it couldn’t be easier.

The Goal

Basically I am going to show you how to use the software, by recreating a portion of the ChurchCrunch website. So tighten your seat belt, because here we go.

1. First, head over to Balsamiq’s site and download their 7 day trial. The installation is very simple and complete instructions can be found:

2. Once you get it installed, open up their software and you should have something look like this:

As you can see, there are several menus. And rather than take you through them one by one, we are just going to dive right into laying things out. Doing is the best learning, at least in my book.

3. Go up to the menu in the middle of your screen and click on containers:

4. This will change the row beneath the menu, and we want to click and hold on the browser window object, and then drag it onto our workspace.

5. Once you drop the browser window, a box will pop-up, you should name your new window and assign the http:// value.

Before:

After:

6. Resize the recently placed browser window to give you a little more breathing room:

7. Click on the common menu:

8. Then click and drag the text attribute onto your workspace and position near the top:

9. Make sure to rename the text appropriately:

10. While still on the common menu, click and drag a link right after your text and rename it:

Renamed:

11. I am going to drop another text box and another link to bring the top left area looking like this:

12. Then from the menu, I am going to make sure that buttons are selected:

13. I then click and drag a combo box into the top right corner

14. Once I drop the combo box, I am going to add all the links that I need:

15. My window now looks like this:

Alright, I am going to move a bit quicker, so hopefully you can keep up.

16. I am going to drag and drop an image element onto the workspace to represent our logo:

17. I’ll then drag and drop a container on the workspace to represent our article:

18. Next we will zoom out a bit and then add image, title, and paragraph elements to our article container:

19. Tags(link), Author(link), Comment(link) are a couple other elements that need to be added:

21. I now am going to frame up the right side of the page. I won’t go detail here, but after I am done, I have something like this:

21. An this is your final product, which you could then send your graphic designer or developer:

Summary:

Just for the record, I personally purchased this product with my hard earned dough, I love it that much! My buddy Mike Brisk and I used it quite a bit when developing our startup Agapage and it really helped convey the layout and UI ideas we had.

The mockup here at the end literally took me less than five minutes to create.

All I suggest, is that you simply start to familiarize yourself with Balsamiq’s amazing product for just an hour or so. I know you will quickly see why it will save you a crazy amount of time (and hopefully money). Not to mention there is a a lot more underneath the hood of their software than what my tiny 21 step tutorial could show.

Good luck designing!