Mister Nifty » Creative

The Cardinal Sin of Design

Brian Fegter — Tue, 27 Sep 2011 07:54:21 +0000

About ten years ago, I was sitting in a graphic design class and the teacher asked us to present a composite image for a mock ad campaign. The first image presented was of a skyscraper and was stretched disproportionately vertically and horizontally. I’ll never forget the look of disgust on the teacher’s face as he lit into us about maintaining proportionality and ratio aspect. Our show-and-tell turned quickly into a diatribe that lasted the remainder of the class. He repeated “Stretching an image disproportionately is the cardinal sin of design” so many times it burned in our brains. We dared not present an image that looked to be stretched or skewed in any shape, manner, or form.

Since that unforgettable mental lashing, I’ve always been keenly attune to aspect ratio in typography and photography, especially in the church world. If you’re not familiar with aspect ratio, it is simply the relationship of the width of an image to its height. For typography (fonts), each letter must be treated as an image and maintain the ratio of height to width. When the width of an image or font is increased, the height must also be increased to maintain aspect ratio and vice versa, or else it will appear skewed and awkward. There is never an instance when fonts or images should be proportioned outside of their original aspect ratio. This is the cardinal sin of design.

Here are some examples of skewing an image.

Original Image – I shot this at my brother’s wedding last month
Skewed Horizontally
Skewed Vertically

There is a cognitive dissonance that is created when looking at the last two images. Even though, at a glance, the images look fine, the mind red flags the image and says “There’s something not quite right here.” There are three things that happen when you present a skewed image in print or on screen:

You distract from the message as the mind will try to reconcile the proportional offense
You do a disservice to the photographer and present their work inappropriately
You lessen the quality of your production

Certainly, completely untrained eyes will miss a slight skewing of an image, however, most people will catch it either consciously or subconsciously. The bottom line is that someone worked hard to create a beautiful photograph. Don’t diminish the quality of the photo by stretching it. The two ways to properly resize a photograph are cropping and maintaining aspect ratio while resizing.

Cropping means you cut away parts of the original image to fit the dimensions of your project. Cropping is perfectly acceptable and a frequent practice in design. A cropped image might not be the original image size, however the subjects still maintain their proportionality. If you must resize an image, the rule-of-thumb is always downsize, and never upsize (unless you are using an algorithmic software such as Genuine Fractals). When downsizing an image, grab a corner of the image and press either the SHIFT or CONTROL key (possibly the COMMAND key for Apple users) while dragging the transformation handle toward the center of the image. If the bounding box adjusts the width and height automatically and the image stays intact, you’ve succeeded. If not, try again or read the application’s help section to find the keystroke assigned to lock aspect ratio. This applies to typography as well.

A few weeks ago I walked into the foyer of our church to find a sign company employee installing custom letters on the wall. Our church uses a script font for our taglines. I was horrified to see that the sign company designer had skewed the script font vertically and the letters looked absolutely stretched. I asked several people if they saw something wrong, and they replied “No.” I then held up a printed piece with the proper proportionality of the script font next to the lettering on the wall and their eyes opened wide. They could not believe how much of a difference it made.

The truth is, it’s a bit more difficult to spot stretched typography if you aren’t a designer. So, what’s the point? Why are you being so petty? I’m glad you asked. Font faces were created to be beautiful and portray a message with style and elegance. Skewing a font diminishes the quality of the font just as the integrity of the images above were harmed. If it’s a popular font, it certainly will be a recognizable error to the masses. Church identities are mainly communicated through typography. When a logotype is skewed and stretched, it directly affects the quality of the brand. We should always put our best foot forward when communicating the message of the Gospel to the community. Certainly, there are people who would be turned off by a cheap looking stretch job.

The number one reason why designers skew and stretch is to fill up white space. White space is a powerful concept that helps direct readers to key points and then directs them to a sub point. When you’re tempted to stretch a font’s height to fill up vertical space or make an image fit your project size disproportionately, remember that this is the cardinal design sin. There’s never a good reason to stretch images or fonts. Saints resize proportionately, sinners stretch and skew.

Go forth and sin no more.

The Cardinal Sin of Design is a post from: Mister Nifty

Stay Connected

Free video converter for Android, iPad, iPhone formats

Brian Fegter — Wed, 17 Aug 2011 15:54:29 +0000

Miro is a super simple and free video converter for Mac that allows you to convert a plethora of video formats for quite a few mobile devices. I’ve used this plenty of times to optimize and convert videos for mobile devices. Video conversion is typically a techie task, but Miro makes it dead simple for anyone to easily convert videos.

Here’s a screenshot of the video conversions that are available.

What are you favorite video converters? Let us know in the comments.

Get Miro Video Converter here

Free video converter for Android, iPad, iPhone formats is a post from: Mister Nifty

Stay Connected

To print or not to print a social media icon, that is the question.

Brian Fegter — Sun, 26 Jun 2011 04:18:47 +0000

I took this photo at the gas pump this morning. It didn’t set right with me. This was an sticker advertisement for a fuel supplement and the designer appended the default social icon trio to the bottom of the ad. I stared at this while my gas was pumping (sans the fuel supplement) and tried to figure out why this irked me so much.

Frankly, I don’t mind social icons on websites that much as they serve the function of directing a user to a certain URL. Placing social icons on print collateral seems to be counter-intuitive to me. The default web behavior is to click on the icon and find pure social awesomeness (or not) beyond the home page. The printed icons in question are commonly used on websites everywhere. There was a dissonance in my brain where Mr. Subconscious was saying “Click click clickety click those bad boys” the Mr. Conscious was retorting “Idiot, this is a print ad.”

The cardinal sin of this ad is they have required the user to go on a clueless scavenger hunt. They are technically saying, “We’re somewhere in the adjacent galaxies of Twitter, Facebook, and YouTube, now come find us. We hope you remember the name of our product for your search.” This creative director had a misfire on one of their cylinders when approving this ad. It is tantamount to telling the customer, “We have a store in the United States. We’re not going to tell you where it is, but we’re going to represent its location with this awesome Google Maps icon that tells you we are super duper tech savvy.”

The bottom line for me is placing social media icons on print media is simply ineffective without…usernames. Icons without context never get searched. People will remember a simple user name like SaveMoneyOnGas, but probably won’t remember to search “Super Mileage Booster Fuel Supplement Twitter Feed.” The point of all of this is what we do on the web doesn’t always translate to other forms of media. You have to adjust for the user experience by supplying enough information in each media form. These days, it’s extremely probable that your print media won’t make it to the user’s office space, therefore rendering your cute, cuddly icons useless.

Don’t be one of “those” that just drag and drop the cliche’ social media icon trio into everything you do without thinking about its user experience ramifications. My personal thought is that people who overuse social media icons for the sake of proving their techno guru-ness are trying to compensate for not being tech savvy at all. Any thoughts from the peanut gallery?

To print or not to print a social media icon, that is the question. is a post from: Mister Nifty

Stay Connected

Wordcamp St. Louis – August 6, 2011

Brian Fegter — Wed, 22 Jun 2011 13:07:20 +0000

If you’re a WordPress freak like I am, don’t miss Wordcamp St. Louis this year. The company I work for is putting on this venue to help others learn and become more acquainted with WordPress. You will also be able to rub shoulders with influential WP guys and network with designers and developers. It’s a one-day event of awesomeness that goes from 8am to 5pm at Maryville University. If you register early, the cost is just $20.00. Late bloomers will have to pay $30.00. I will be there taking photos and helping out as a gopher here and there.

Go get your register on at 2011.stlouis.wordcamp.org

Wordcamp St. Louis – August 6, 2011 is a post from: Mister Nifty

Stay Connected

DIY Photo Booth For Your Next Event

Brian Fegter — Mon, 07 Mar 2011 17:41:45 +0000

I just found this awesome free download to turn your Mac into an automated photo booth. This is great for weddings, youth events, fun church directories, and much more.

Check out Curbly’s DIY Photo Booth Post

DIY Photo Booth For Your Next Event is a post from: Mister Nifty

Stay Connected

Free Graphics For Churches

Brian Fegter — Mon, 24 Jan 2011 03:13:06 +0000

Vintage Church is an awesome site for free church graphic resources. The artists have graciously offered source files for Photoshop, InDesign, Illustrator and much more. These resources go beyond simple visuals, they also include reading plans, lessons, and bulletins.

Check out Vintage Church now!

(via Church Crunch)

Free Graphics For Churches is a post from: Mister Nifty

Stay Connected

My Moleskine is an Escape from the Digital

Brian Fegter — Fri, 12 Nov 2010 15:37:08 +0000

I am immersed in digital culture on a daily basis, however I have a profound affinity for the analog side of life as well. I carry two things with me at all times.

The Lamy Safari Fountain Pen

The Moleskine Cahier Notebook

Penmanship is quickly becoming a lost art. With the onslaught of typing and the Internet, we rarely find ourselves writing more than a scribble here and there. Good handwriting involves motor skills and concentration. Typing for me is more of a subconscious activity that doesn’t take much effort at all. Also, typing is uniform and doesn’t give way for much creative, artful expression. My pen/notebook combo help me escape from the realm of digital and use my right brain. Instead of typing text all the time, I can doodle and notate creatively.

Since I’ve been carrying the Moleskine, I have found I take time to journal small, but important things in my life. Things like sticking my “I Voted” sticker on a page and writing the date next to it, or drawing a sketch of an idea, or writing important points from a phone conversation. By journaling the simple things of my life, I find each notebook takes a personality and a story of its own. I file these notebooks away with the date range on the cover. One day, I will pass these on to my children, and it will be a treasure trove of details of my daily life.

The larger question than “Do you have a portable notebook and fancy fountain pen?” is, “What are you doing to escape digitality and express yourself in a way that’s tangible, meaningful and prolific?”

What are some ways you escape the digital in your personal life?

My Moleskine is an Escape from the Digital is a post from: Mister Nifty

Stay Connected

Learn to Create WordPress Themes

Brian Fegter — Mon, 08 Nov 2010 13:50:27 +0000

The ever awesome Chris Coyier from CSS-Tricks has now released a course on Lynda.com teaching you how to create a custom WordPress theme from scratch. The cost is $25.00/month for a Lynda subscription with no monthly contract obligations. This is a small prices for the value of the education you’ll get from this course. Lynda also offers many other video courses about a plethora of programs and topics.

Go To Lynda -> WordPress 3.0

Learn to Create WordPress Themes is a post from: Mister Nifty

Stay Connected

Free Video Converter

Brian Fegter — Mon, 18 Oct 2010 13:34:09 +0000

If you’ve ever tried to convert a video from one format to another you know how frustrating it can be. I’ve tried dozens of products over the years and each one has its quarks. I finally found a free solution that hasn’t crashed on me yet. It’s called Freemake Free Video Converter. Sorry Mac guys, this one is only for us lowly PC guys.

Here are some of the features (from their site):

Input Formats: Convert video from DVD, video cams (avi, mpg, tod, mov, dv, rm), mobile phones (3gp, 3g2), Internet (flv, swf, mp4), PC (wmv, mkv, qt, ts, mts), music (mp3, aac, wma, wav, ogg), photos (jpg, bmp, png, gif, tif).
Output Formats: avi, wmv, mp4, 3gp, dvd, mp3
Combine multiple videos into one file
Create a slideshow video easily from a batch of photos
Minimal video editing – cutting, rotating, etc.
DVD burning with menu support
YouTube uploader
Much more!

Click here to view the embedded video.

Get the Free Video Converter

Free Video Converter is a post from: Mister Nifty

Stay Connected

Free Illustrator Alternative

Brian Fegter — Wed, 11 Aug 2010 19:03:05 +0000

If you don’t have Adobe Illustrator, and you’ve tried opening a .AI file, you know what a hassle this can be. Certainly, you can open it up in Photoshop, but it will convert your resizeable vector file (lines and fills) to a rasterized image (pixels and dots). Since most churches don’t have a person on staff who knows how to use a vector program like Illustrator, they don’t have anything capable installed on their computers. Also, Illustrator costs hundreds of dollars and is not worth the cost to be used a few times a year in most cases.

And now, after reading this paragraph, your life will get immensely easier. Enter Inkscape. This is an awesome free open source program that you can download without paying a dime. It import Illustrator, EPS, SVG, PDF files and allows you to work with paths, shapes, curves, lines, text, etc. It also exports in all of these formats as well. If you have a logo you need to convert to an editable format, they have a fantastic trace option that will convert your image to a vector shape. Inkscape is a great tool to add to your arsenal for vector editing on a tight budget. Inkscape is available on PC and Mac!

Here are a few screenshots from Inkscape;

Go to Inkscape

Free Illustrator Alternative is a post from: Mister Nifty