How to Make Powerful Pictures

Want to know a huge secret about designing websites? 

If you have awesome pictures but a shoddy design, viewers will overlook flaws in the structure and design of your website.

If you have awful pictures but a superb design however… then you just have an awful website.

The secret is this: pictures are important.

 

Pictures are important. Really important.

One of the great secrets and principles of website design is that perceived quality of a website will largely be affected by the quality of images on the website. Thus, serious web designers should never allow anything but high-quality images on their websites. Can’t get a good quality image? Only have cheesy stock photos to use? THEN DON’T USE THEM.

 

Even non-creatives can make nice pictures.

I’m not an artistic guy at all.

I tell every prospective client that I’m not going to be making an online version of the Sistine Chapel. My business card doesn’t even say “Web Designer” – it says “Front End Web Developer.” I want prospective clients to know that I’m not an artist nor do I want to be. That doesn’t mean I can’t make pretty stuff though.

Contrary to an artistic method, I approach images and design using what I call “Left-Brain Creativity.” Instead of being inspired and tuning into feelings to make art, I analyze why a particular picture looks good or bad. Then I try to mimic the style. I see what works and what doesn’t and then I make adjustments based on that assessment. That’s “Left-Brain Creativity” for you.

***

I recently did a bit of image editing to add some pizzazz to a project that I was developing. I spent a lot of time on just a couple of front page slideshow images, but believe me: there is no such thing as spending too much on powerful pictures that can impress and entice your users.

Here are steps to how to make powerful pictures for the front page of your website project:

 

Step 1: Find powerful words.

For me, the words were already there on the client’s old website (studyabroad.org) that I was recreating:

Dare to discover,

Dare to learn,

Dare to understand.

The client, the Study Abroad Center at the University of Hawaii at Manoa, helps students venture to different parts of the earth while being able to earn academic credit. Their words or “motto” reflect that goal of theirs.

 

Step 2: Find a powerful image.

The whole idea of study abroad is to want to explore the world and the motto in step 1 corroborate this. Knowing the direction and purpose of the organization, I started looking for free images of “roads” and “paths,” which align greatly with the idea of seeing new things and exploring.

Alpine countryside

 

Step 3: Combine the words and images.

The whole process is a hit, miss, and re-adjust. As you can see, it took me a bit of time to not only adjust the photo, but also to get the positioning right. Everything from the font style to the font position to the crop has a definite purpose. In this case, it’s to accent the powerful words with a powerful image.

My first thought was to copy the “picture-quote” method that Tumblr has made so popular. What it is basically exactly what I’ve said so far: powerful words coupled with powerful images.

powerful-picture1

It was okay, but I did not think the font was powerful enough. In fact, going back to the “picture-quote” style, bold sans-serifs fonts are usually the most effective. Also, because of their thickness, they are must easier to read when plastered over the center of an image. I added an outer shadow to add contrast to the words to help legibility, especially when some of the words are over white clouds (white on white a’int right!).

I also added a little button on the bottom to encourage people to click on the slide.

powerful-picture2

It was looking better, but glancing back, I realized that I had made a terrible mistake that caused the entire piece to not work: I had this majestic view of an empty road with wild pines to each side and a glorious view of a mountain in the back… and I was covering them up with words and a button. So what we have is a big mess of words and an image both competing for attention. Basically, it’s an imbalance of power in the image and it needed to be corrected.

powerful-picture3

I decided that the image was too wonderful to pass up. It said so much and worked so well with the motto for the organization that I had to pull back on the words to feature the image more. It’s like a alpha male lions in the serengeti lunging at each other for leadership of the lions – one eventually has to yield.

To balance things out in the picture, I scaled back the words and tucked them to the side. This is important because we don’t want to obstruct the road and the mountains, which create that atmosphere of exploration for viewers.

As for our words, we kept them bold, because they are important, but they are definitely 2nd fiddle to the image. However, the words supplement the image wonderfully and so we have a powerful picture.

 

Practice makes perfect.

I’m not saying that my picture is a gift from the heavens to bless all website visitors, but it meets the standards that I lay out for my websites. It’s nice and it’s completely appropriate for the organization. Furthermore, it communicates a lot to viewers while only having 9 words (essentially) present. So despite this and 3 other slideshow images taking up more than half a day of my time, it was totally worth it in the end. Don’t you think?

One thought on “How to Make Powerful Pictures

  1. Hi Ron, I saw your website. Its really cool and responsive style of navigation. I also saw your portfolio and the powerful lines as you display in images in this post. Its awesome. I am working with infobizzs.com since some long time and searching on different web development trend and methods.

Leave a Reply

Your email address will not be published. Required fields are marked *