Website design is obviously a visually oriented craft. So why rely on just words to convey something a picture can do better? Whether you are communicating within your church web team, at a committee meeting, or a presentation to executive leadership; pictures will more easily communicate what your website will look like.
Unfortunately, making high fidelity mock-ups of a website is a very intense task. Even if you are a crafty designer that is well-versed in all of Photoshop’s time-saving keyboard shortcuts; it will take you far longer than if you were to sketch the site on a white board. Plus, you can start with the larger elements of a page rather than what gradient you want to use in the background. Overall site contents is more important than an element’s reflection effect.
The Big Picture
This high-level approach to creating a website is most effective at the earlier stages of your website creation or re-design. Before you start writing the content for each page, consider your global artifacts like headers, navigation, and footers. Use a dry erase board and markers, or paper and large markers to sketch out these elements. This prevents you from digging into the details and just some large block items that generally show what and where items will be.
Remember Intent
This should be done while closely consulting (and possibly modifying) your content strategy document. Remember that each block of content you want on your page should have a purpose and an owner. When you consider the intent of each page, it prevents you from just slapping blocks of content that have no purpose or reason for being there. If the argument comes up that they are still very important, maybe they would be better off placed in another section of the site.
Storyboarding
On the surface, the only drawback is sketching interactions. You cannot show how a mouse click enlarges an image, or how a hovering over an element causes a menu to drop down. Although your audience needs to be present to see this, but with practice you can quickly sketch how these interactions happen by either drawing over top of the original sketch. Or you can use the technique of storyboarding to show different states the page or page component has. Not sure what storyboarding is? Think of how comic books tell stories through text and images.
Simple is Better
Another worry is that you need to present fancy mock-ups to your pastoral team. Keep in mind that you can sketch out an entire website very quickly using this method. In fact, you will even have time to make multiple versions of the homepage and other highly disputed areas of the site. This ability to quickly put down ideas is helpful because it takes less time and thus less money. If you can convey your ideas more quickly and cheaply, I am sure they will forgive your “crude” presentation!
Lastly, you can even test these sketches with certain members of your intended audience. When you have a good idea what the layout will be, you can drive deeper. Tape photos, hand write the intended copy, and flip between pages to show how the navigation will work. Tape them to a computer monitor or on top of a phone or tablet if you want even more realism. Your limits are only constrained by your imagination.
Action Item
Assuming that you can draw boxes and lines of various angles; you can sketch web page mock-ups. In fact, if they are rough sketches with not a lot of form, it better lends to that they are not a finished product. They are ideas turned into shapes and interactions. Get creative and iterate through the design process in a much faster and cheaper manner by harnesing the power of sketching.
Photo courtesy of Alesia
