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.

1. Original Image – I shot this at my brother’s wedding last month
2. Skewed Horizontally
3. 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:

1. You distract from the message as the mind will try to reconcile the proportional offense
2. You do a disservice to the photographer and present their work inappropriately
3. 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.

I stumbled upon a simple web application called WorkFlowy. At first glance I was a bit bored to be honest. I thought, “Oh great, another online text editor and outline application.” But, I gave it a shot to see if I could organize an idea quickly. After writing a few outlined notes, I had the WorkFlowy epiphany. I accidentally pressed a key combination and it navigated the entire page into the sub outline I had created. I pressed it again, and it took me one level deeper, showing me only the information connected to that grandchild bullet. In other words, the zoom in/out feature makes one text document not just one book, but a library of information that I could navigate through with simple key strokes.

When you traverse an outline, WorkFlowy displays breadcrumb links to help you zoom out from your current position on the document. You are given one document to create a world of information. Main points are like books, child bullets are like chapters, etc… You can literally map your entire ministry on one easily accessible document. The search feature is simple, quick and accurate and helps you find information fast. The plethora of keyboard shortcuts makes traversing your document super fast.

Finally, the ability to export specific contextual information in plain or rich text is off the chain – yes I throw down some slang when I’m tired. If you’ve been kicking the can to get an idea organized, or you simply need to diagram your workflow to help your productivity, WorkFlowy is a jewel.

I recommend everyone to start your Workflowy document today. It’s dead simple and free to use.

Go to WorkFlowy

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

NiftyMaps is a small application to help you easily generate branded Google Maps printouts.

NM was originally created for our church outreach visitation efforts. Typically, our admin staff would browse Google Maps and print off dozens and dozens of ugly Google Maps for the team. This was painstaking as it took many hours to complete this task. I built NiftyMaps to generate a large number of maps within minutes, formatted in a nicely branded template.

Features

• Control your destiny with granular settings in the config file
• Allow a list of approved recipients to receive lists of generated map links
• Easily add your own branding
• Beautifully simple branded map template
• Google short URLs for easily sharing a map with a friend
• Archive your generated maps via email.
• Password protection for sending map lists via email.
• Does not use a database! No high techyness required.

Screenshots

Requirements

• Google Maps API Key (signup link included)
• Google Services API Key (signup link included)
• PHP5 or greater
• Must have mail() enabled in PHP5 (no SMTP support yet)

Demo

Check out our demo here: NiftyMaps Demonstration

Installation

• Upload the /maps folder to your web server
• Open and configure /inc/config.php in a text editor (Notepad++)
• Enjoy yourself!

Investment Cost

Nifty Maps is a one time investment of $10.00 including lifetime bug/update patches (posted on this page).

Purchase Now!

Other Stuff

This product has no official support forum and is sold as-is. No refunds will be afforded as this is a digital product. Please submit bug reports below in the comments. I will release patches on this page on a regular basis (on this page). For general inquiries, use the contact form above.

Recently, I was assigned a task for my job to create a jQuery script that deleted elements from a sortable list, and then gave the user the ability to undo the delete action. I thought I would have a little bit of fun with a doctrine I don’t subscribe to at all, but it worked for this application.

• I created a hidden element to store unwanted list items: <div id=”purgatory”>.
• Then I created a hidden element wrapper for the undo button that shows once the delete button is clicked: <div id=”rescue-from-purgatory”>.
• Once the undo button is clicked, I set a Javascript variable to count the number of items in “purgatory” as follows: var lostSouls.
• So, in a nutshell, when a user clicks delete, they send the unwanted list item (lostSoul) to purgatory. When they click undo, the user rescues the lostSoul from that dreaded holding cell.

The point of this silly story is that you don’t have to get bored with your job. There are plenty of other ways to keep the ‘fun’ in functional, especially with long boring code blocks. If you enjoy what you do, you never have to work a day in your life.

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?