Clarity Seminar

Let's get it clear right from the start. Appearance isn't everything; beauty really is only skin deep, and we know that God looks at the heart, not the surface of things. But that doesn't mean we should go out of our way to make church publications look intentionally ugly or amateurish. The cool thing is, when you do it yourself, a delicious design costs no more than a design disaster. Make the effort to learn some simple design rules, and your church publications will start to look as if they mean business. People will read them with the attention they deserve, and there will be a subtle change in the way your church is perceived - from those within, as well as outsiders. It's all about attention to detail; a statement that what you're doing and saying is worth doing and saying well. Above all, good visual design is about clarity. The effort you put into design will help bring what’s important to the forefront, and remove distractions. It’s worth the effort and it’s kind of fun!

case study Here’s an example of a current 3-mobile advertising brochure. It’s not chosen because it’s a great example of design - it’s chosen because it’s typical of the type of material that we see every day. * Take a close look, and note as many elements as you can that distinguish this as a professionally produced flyer.

* What elements of ‘brand identity’ can you see? How is ‘brand identity’ communicated?

* What ‘design trends’ can you spot. Where do they originate, and what do they communicate?

* What stops you producing material of this quality for your church or ministry?

Fonts: Verona and Modena by Miles Newlyn (www.newlyn.com) are owned exclusively by 3-mobile. You won’t see them anywhere else... and you’ll never see a 3 advertisement without them!

design tips Contrast Rule number 1 in any good design is... create contrast. Contrast brings visual opposites together in surprising and exciting ways. Contrasts can be created by the choice of colours, choice of object sizes, and the choice of fonts and type-styles. Typically, we’re far too conservative with our use of contrast, which leads to bland looking designs. According to Robin Williams, in The Non-Designer’s Design Book, “the idea behind contrast is to avoid elements on the pages that are merely similar. If the elements (type, colour, size, line thickness, space, shape etc) are not the same, then make them very different. Contrast is often the most important visual attraction on a page.”

Repetition Repetition is the glue that makes a ‘design’ a design... and not just a bunch of elements on a page. You can repeat colour, shape, texture, spatial relationships (column widths, white space etc) line thicknesses, and font selection. Repetition can be subtle - for instance, the thickness of the crossbar in the letter A is often used to determine the line thickness of all borderlines in a design. The “design tips” header on each of the following pages of this section should be repeated in the same font, colour and position on every page. Sometimes, a particular angle or curve is repeated throughout a design, in a variety of creative, yet recognisable, ways.

The following tips come to you from an enthusiastic amateur rather than a design professional. They’re the product of experience, mistakes, and a few good resources, which you’ll find listed under Tip No. 10.

create

CONTRAST

create

CONTRAST

Abcde design tips

Alignment

Heading

Another of the four major design tips from Robin Williams (The Non Designers Design Book) is to watch your alignment. In simple terms, it means making sure things line up. When you set out text and shapes on a page, strong alignment-lines are inevitable - the edge of a box, the side of a text frame, or a strong line in an image all create linear elements that direct the eye. Too many of these, and the effect is confusing and untidy.

Here’s one of the major ‘design crimes’ that you’ll see committed over and over again. Every element on a page should have a visual alignment connecting it with another element on the page. This creates a clean, fresh look. Alignment lines might be invisible, but they’re every bit as important as the elements on your page. Too many elements, with too many invisible alignment lines, makes for a chaotic and amateurish design. Here’s one of the major ‘design crimes’ that you’ll see committed over and over again. Every element on a page should have a visual

David Whitbread puts it this way: "One way to ease the resulting angst is to limit the number of implied lines and shapes by using the same ones many times, instead of creating new ones at each introduction of a new element. This strengthens the layout. The secret formula to successful layout... is to limit the number of vertical and horizontal divisions of the space. Let the same line do a few jobs. It could be: * the edge of the title block * the border of a picture * the centre of a logo at the bottom of a page. Aligning elements groups them together, and creates a single entity in your design. You'll need to be aware of how these visually

logo

Heading Here’s one of the major ‘design crimes’ that you’ll see committed over and over again. Every element on a page should have a visual alignment connecting it with another element on the page. This creates a clean, fresh look. Alignment lines might be invisible, but they’re every bit as important as the elements on your page. Too many elements, with too many invisible alignment lines, makes for a chaotic and amateurish design.

logo

Heading Here’s one of the major ‘design crimes’ that you’ll see committed over and over again. Every element on a page should have a visual alignment connecting it with another element on the page. This creates a clean, fresh look. Alignment lines might be invisible, but they’re every bit as important as the elements on your page. Too many elements, with too many invisible alignment lines, makes for a chaotic and amateurish design. Here’s one of the major ‘design crimes’ that you’ll see committed over and over again. Every element on a page should have a visual alignment connecting it with another element on the page. This

logo

design tips grouped elements work with the other parts of your design in terms of balance and contrast.

Exercise Mark in the invisible alignment lines on this church bulletin cover. How many are there? How could you reduce them? What other design improvements can you think of?

ANY

design tips Proximity Proximity is the fourth of four major design rules taught by Robin Williams in “The Non-Designer’s Guide.” In summary, items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit, rather than several separate units. This helps organise information and reduce clutter. Notice how this works in the example below...

What else needs fixing?

Balance A balanced design is ‘easy on the eye.’ When you’ve worked on the contrast, proximity and alignment issues in your design, you’ll have produced visual elements that each have visual ‘weight.’ You can get an idea of the weight of each element by looking through half-closed eyes. The weight of a text blocks varies according to the density and boldness of the font. Colour and greyscale images all have their own visual weight. Ultimately, all your elements need to ‘balance’ so as not to visually tip the page over. A large ‘grey’ block can be balanced by a small ‘black’ block. The rules of harmonious balance are pretty much exactly the same as the laws of physics that you learned on a playground see-saw.

design tips Create a Corporate Print Identity “Print identity is only part of an organisation’s image - but it's probably the easiest part to control,” says designer David Whitbread. Print identity can help an organisation establish a perception of itself as worthwhile, trustworthy, professional, forward thinking, up-to-date... alternatively, it can look fly-by-night, cheap, tasteless or muddled." Naturally, a print-identity makeover won't help a bit if your church or organisation really is fly-by-night, cheap, tasteless or muddled. But if you're looking for a way to symbolise the fact that your church is going forward with confidence - as much to the current members as to newcomers you could do worse than professionalise your print-identity. How? It's simple. Get rid of all those fonts! Yeah, I know - fonts are fun. I love 'em. But the trick to upgrading your look is to limit your typeface selection to a maximum of two carefully selected fonts. Look around. As we saw at the start, companies like '3'have easily identifiable corporate fonts that appear in every ad. In some cases like ‘3’ - the typeface is specially commissioned and designed. To change a corporate typestyle is no small decision - once a 'house style' is defined, it's applied rigorously. At Mitchelton Presbyterian Church, we used the Eras font family for a number of years. It's great, because it comes in a number of different weights, from Eras Light right through the range to Eras Black and Eras Ultra. We used Eras medium for body text, and picked out strong contrasts with Eras Ultra, or at times, with large headings in Eras Light. After a few years, it was time for a makeover. Eras was starting to look a bit stodgy and dated. Again, the goal was to find a typeface that contained a broad family of different weights, was nicely designed, and was not too common - not so easy if you're on a limited font budget. We settled on the Bell Gothic family.

With clean modern lines, it looked fresh, and there's a nice contrast between the medium and black versions. We use Bell Gothic on our bulletin, Bell Gothic on our newsletters, Bell Gothic on our mail, Bell Gothic on our study guides, Bell Gothic on our sign... the goal is to have our corporate font everywhere. At Queensland Theological College, the corporate fonts are Book Antiqua and Segoe (Microsoft’s excellent new system font!) They work superbly together. But why? Remember this rule: Too many fonts make your work look like a kid in a toybox. It's important in any publication to stick to no more than a couple of contrasting fonts. And in defining a corporate 'identity', our goal is to lock in one basic type family with multiple weights. Let's bend the rules just a fraction... designer David Whitbread says that some organisations choose a "support" typeface as well. It may add un-necessary complications, and needs care if you're going to handle it with success. The key is... contrast. For typefaces to work together well, they've got to be decidedly different. Here's Whitbread again (p185, The Design Manual): "The secret of successful combination of typefaces seems to be the ability to maintain several contrasts between them. Look for at least two contrasts when selecting your 'worker' and 'special' faces. The stronger the contrast, the more effective the combination will be. You can contrast:

How? It's simple. Get rid of all those fonts!

design tips * their form: serif (like Times, with little tags on the stems), sans serif (like Arial, without tags), script or decorative * their weight * their scale * their spacing (wide or narrow) * their slant (Roman or italic) * their shape (condensed or normal) * their case (upper or lower) Whatever you do, avoid using two different sans serif fonts on a page. For example, don't use both Eras and Arial - they look similar, but the small differences clash disasterously. At MPC, we supplement our "house style" with a contrasting "special" font. I found "Baby Bowser" at www.dafont.com ... and I think it works superbly with the Bell Gothic family. This document is produced using two free fonts from www.dafont.com; Yanone Kaffeesatz and Fontin. They produce a nice contrast, with Yanone used for headers and Fontin for legible body text. As a bonus, Yanone is produced in four highly contrasting weights.

contrasting weights

Look back at the church bulletin example on page 4. How many fonts are used? What is the overall effect?

"The secret of successful combination of typefaces seems to be the ability to maintain several contrasts between them. David Whitbread

design tips Looking for Inspiration When you’re looking for design inspiration, where do you turn? Whatever you do, please don’t use religious clip art. I know - it seems like a great idea. In the old days, you could buy it in printed form, to cut, paste and copy... catchy pics of cartoon characters saying "Praise the Lord," or praying hands, or candles. These days you can buy CD collections, or find loads of similar stuff on the web. Please, please... don't use it. All you'll end up doing is make your publications look like they're designed for a corny, cliched church. Often, they’ll be pixelated, or at best, cartoony line art. The best thing to do if you're looking for images is to avoid clipart completely, and go for "photo-clips." Basically, a photo clip is an object cut from its original background and floating in white or transparent space. They look great in almost any context. You'll find the useful Hemera collection on CD in some retailers; though it appears they've been taken over online by the much more expensive Ablestock (sheeesh who'd pay $199 for an image??) More affordable is the Dreamstime online collection - around $1.00 per image, though you'll have to look around to find "photo-clips." (They may be called 'photo-objects,' or simply be listed as having 'white background'.) Cheapest option of all is Google Images. You'll be sure to find something suitable for anything you can imagine... though often at very low resolution. If you're printing something small, you can get away with it - but take care. Using an overblown low-res jpg image you've sourced this way is certainly cheap. And looks it. Look at magazines, commercial flyers and TV adverts for inspiration. Instead of dumping your junk mail straight in the bin, study it for design ideas. Radical thought, eh? Here's an example. Though I've only ever saw one episode, the logo for Bryan Brown's 'Two Twisted' series on channel 9 really caught my eye. It's sensational. With a teaching weekend on "The Seven Deadly Sins" coming up, I figured that the topic had suitable 'dark edge' for a similar treatment. I experimented with a bit of amateur calligraphy of my own before settling on the font LMS Bloody Brujah on www.dafont.com. I added a few swishes and swirls, and ended up with something that I thought was sufficiently evil looking.

If you want to avoid creating church publications with a cringe factor, then don’t use church clip-art for inspiration... Create cultural engagement by looking for inspiration in the kind of media people are exposed to every day.

design tips Software Tools If you’re going to be designing more than the occasional flyer, you’ll need the right software tools for the job. Professionals always use a Mac equipped with Photoshop, Illustrator and InDesign, at a total cost around the same as a beachside house at Ulladulla. If you can’t afford that kind of luxury, and you’re a PC user like me, there are some inexpensive options.

Bitmap (Photo) Editors For starters, you’ll probably need a ‘photo-editor’ - a program that lets you play with the individual pixels that make up a bitmap image. C heck out Photofiltre - it's a free bitmap editor for PC users, and after a quick look at the features, I'd have to say it's a brilliant reminder of the good ol' days of Paintshop Pro 4.0. Is it only me... or are paint programs just too complex these days? Photofiltre is quick, simple and responsive, and ideal for quick editing jobs. The price is right, too. More technical users might prefer GIMP, which has all the functionality of Photoshop.

Vector Editors If you’re working on an image with clean lines and angles, you’ll need a vector graphic editor. Illustrator and Corel Draw are the leaders here, but you can check out Inkscape (easy to find with Google) for free vector art functionality. It’s a little clunky for my tastes, but it certainly works. Zeus Draw is a new and low cost (US$90) alternative to Illustrator for Mac users.

Publishing/Layout For final layout of your project, you’ll need a program like Microsoft Publisher, or preferably, InDesign or Corel Draw. Corel Draw X3 is available to churches at the Academic price of $185 from Rob Beaumont, Berlin Wall Software Supermarket 408 King William Street ADELAIDE SA 5000 PHONE: (08) 8231-4799 FAX: (08) 8231-4417 WEBSITE: http://www.berlinwall.com.au

Vector art is made up of smooth lines and curves which are mathematically defined.

design tips Commercial printing - Bleeding Edge Designs If you’re looking for a professional result, it may not be as expensive as you expect to run a full colour commercial print job. Sure, you can run your inkjet or colour laser printer all day and get a reasonable result - but apart from the final print quality, there’s one other subtle feature that sets apart a professionally printed product. And that’s ‘full-bleed’ printing. In other words, the ink runs right off the edge of the page.

print right to the edge for a professional appearance

Most printers will ask you to provide 3mm ‘bleed’ all around the page in the artwork you prepare - so it’s best to plan ahead for this. And whatever you do, don’t waste the opportunity of using this subtle ‘quality’ advantage by preparing artwork that doesn’t run all the way to the edge of the page! Here’s a handy hint - we get a professional looking result with our weekly church bulletins by ordering paper with pre-printed ‘fullbleed’ border artwork. The fact that the colour runs all the way to the edge gives a subliminal impression of quality - the content of the bulletin is overprinted with the photocopier each week. Franchises like “Worldwide Printing” (www.worldwide.com.au) offer some very affordable deals if you design to their standard sizes. For example, full colour ‘Slim-DL’ flyers are just $85 per 1000. Email them your artwork in PDF format, and it’s back in no time.

30 Lonsdale St Braddon ACT 2612

makeover class What happened to get from “A” to “B”? See if you can identify the major changes between the two versions of the advert below.

presentation and website design tips powerful presentations lless is more. Aim for simplicity and elegance. lUse a clear, sans-serif typeface with a solid boldface for highlights lUse high contrast text - light dark background is best; or black on white! lUse as few words as possible per page lUse 36 point type for readable text lDon’t try to ‘say it all’ on the screen. Just highlight. lCreate your own backgrounds and artwork with a dedicated graphics program. This allows you to create subtle effects that will distinguish your presentation from the standard Powerpoint and Keynote template designs. l layout should follow standard design rules of alignment, contrast, proximity and repetition. lavoid corny transitions, animations, sounds and clipart. lif you’re a preacher, consider using an evocative picture as a background, rather than words.

web design tips from http://ied.gospelcom.net/church-site-tips.php lDo not place too much information on your homepage. lAlmost everything should be visible without needing to scroll.

Avoid ‘churchy’ graphics lDo not add automatically starting Midi hymn tunes or music files to your site either lUse at least one graphic of a person’s face on the homepage. lA 3-column layout is often the most suitable for a church site. lNever use an introductory ‘splash page’. These are intensely irritating to users. lEvery page should display the same overall appearance, with the same navigation options in the same place. lAll links, menu options and buttons should be clearly identified as ‘active’ – they should change color when hovered. lDon’t underline any text which is not a link – this is really confusing! lUse colors correctly: understand how to choose a color scheme, how colors relate to each other, and what mood they communicate. lDon’t use patterned graphic backgrounds behind body text. With very few exceptions, black body text on a white (or near-white) plain background is best lConsider a ‘liquid’ page design: the content should flow naturally and fit together, at any screen resolution (i.e. size of the monitor screen measured in pixels) or reasonable font resize by a user. lDon’t leave out-of-date content online. Few things rob a site of credibility more than this. lUse several people to proof-read for typos and poor grammar. Make your pages printer-friendly. This can be done automatically, using a ‘print’ CSS style-sheet.

resources books Looking for a simple guide to getting started with design? Simplest and best is "The Non Designer's Design Book," by Robin Williams at Peachpit Press. With just four simple rules, she can demolish and rebuild everything you've ever put on paper. The rules? Consistency, Repetition, Alignment and Proximity. I'm sure there's an easy acronym in there somewhere. More on these later. The second book worth checking out is a bit more substantial. Written by Australian David Whitbread, "The Design Manual" (UNSW PRESS) is a huge and very thorough manual written in an easily accessible style, and loaded with examples

online Before & After magazine has been sharing its practical approach to graphic design since 1990. Dedicated to making graphic design understandable, useful and even fun for everyone, B&A specialises in makeovers. There's a pile of free stuff, but it's worth subscribing for the beautifully designed monthly features in pdf format. The cost: $US24 for 12 months.

http://www.bamagazine.com/ You might also like to visit my blog, www.design4church.blogspot.com I’m trying to encourage some professional designers to contribute; and also to create a forum to share design tips and creative ideas.