Pixel Lava Interactive
  • Home
  • Websites
    • New Websites
    • Website Redesigns
    • Website Portfolio
    • Website Tune Ups
    • Website Updates
    • Zoom
  • Graphic Design
    • Logo design and brand identity
    • Business Cards
    • Postcards, flyers, ads and more
    • Illustration & Infographics
  • Marketing
    • Seasonal Website Promos
    • Video Holiday Cards​
    • Video & Motion Graphics
  • Training
    • Online Event Hosting
    • Web Lab Kits
    • Webinars
    • 1-to-1 Trainings
    • Weebly Training
    • Digital Summer Camp
    • Training FAQs
  • About
    • Blog
    • Client List
    • Good Vibes
    • Review Me
    • Recommendations
    • Partner Program  🔸
      • Partner Portal
    • Adventure Indoor Fitness
    • Pixel Lava Unplugged
    • Art Barn Shop
    • Happy Holidays
    • Happy Halloween
    • Remembering Bob
    • Remembering Mary
    • Sample Store
  • Contact
    • Download page
    • Support
    • Make a Payment

Field Notes Blog

News and thoughts on UI/UX, web design, and more.

10 Tips for Compelling Website Images

7/6/2013

0 Comments

 
Picture
I think we can all agree that imagery can make or break a website. Compelling images draw us in and support the site's call to action. Low quality, pointless, unappealing images are an instant turn off. Remember that first time visitors will give your site 5-20 seconds before clicking away and your imagery is what makes that decision. But what are the technical and conceptual keys to a good photo, illustration or image? Here are my top ten tips, based on over 20 years of building websites and marketing collateral:


  1. First the basics, give your viewers bright images. This may seem obvious but I see a lot of dark photos. You may have a new, high-res monitor but the average viewer is on an older computer that may have a much dimmer, lower resolution screen. Appealing business images are usually bright and lively - even night scenes. If you look carefully you'll notice that what makes a beautiful dark photo is often the contrast within it. Avoid low-contrast, dark images.
  2. Give us sharply focused shots. Blurry images - unless the blur is being used as an effect - should be avoided. You don't want users squinting at the screen and wondering if their eyes going bad. Don't use pixellated images (the ones we've all seen with the jagged edges). This usually means that a small image was resized to be larger, which just makes each pixel bigger.
  3. Use the right resolution range for the web: 72-96 dpi. Higher resolution images look better but take longer to load. A good balance is 72-96 dpi at the proper dimensions to fit the layout. If you don't have Photoshop or a fancy image editor, free online editors like Pixlr.com work great.
  4. Crop to feature your subject. Images should have a clear point in terms of meaning. Minimize busy surroundings when taking photos (especially of people and objects) and crop out unnecessary parts of the images when using snapshots. I often see event photos where the photographer has captured a scene but the point of the image is the two people off to the side. Crop the image so that the people we're supposed to be interested in are at the center. Think of cropping as an art form and experiment with how different an image looks when cropped differently. Take a close look at major websites and begin to notice how carefully the images are cropped.
  5. Color coordination matters. While researching house painting, a painter friend pointed out to me that unless you're going to change the color of your roof you will want your new color scheme to match it - a fact frequently overlooked by people giddily holding paint swatches up to their walls and door frames. This applies to websites too. When choosing images, look at them side by side (or on top of) your website. Often times an image that looks great on it's own looks dreadful on your burgundy website. It's also a great idea to chose images with clothing or background elements that match your site colors - it leads to a more cohesive look.
  6. Now some psychology, have your subject look in to the camera. People are drawn to faces, that's why so many advertising images feature typically attractive faces with emotionally-open expressions. These types of images convey a welcoming, trustworthy feeling. If you're buying stock images, just be careful not to chose tired, cliche images - you know the ones. The multiracial group of people shaking hands with joyful fake expressions ... we've had enough of those. 
  7. Show us the action. If you're posting photos of your tradeshow booth, we want to see the faces of your attendees and what they are interacting with - not the backs of a bunch of people huddled around a table. I think this is common because we can be a bit timid as photographers. Get in there! And if you're buying stock images, show people's faces as they do things, not just hands or backs of heads.
  8. Color matters ... again. Different colors (and shapes) appeal to different demographics. It's not as simple as cold or bold colors for men and warm or soft colors for women. Think about your target audience and visit the sites of major brands that cater to the same group. Colors can also elicit emotion. I once had a client say he wanted his site to have "warm" colors. When I sent the design sample in an off-white/beige/red palette he said that wasn't "it" so I asked him for a specific color he said green. He wanted welcoming, soothing colors that were warm in an emotional sense not warm in a temperature sense. Think about colors as a means of visual and emotional communication. For more on this topic see The Science Behind Colors In Marketing.
  9. Be stylistically consistent. Use images that are composed in the same - or at least similar - image styles. If you are adding an image to represent each of your ten service offerings, take the time to pick out ten images with the same sort of framing, focus, and colors. Jumping from a distance shot to a close up or from a face to a crowd might look fine individually but remember that the images will be viewed on the same page or one after another as the viewer navigates your site. You want a smooth, consistent flow.
  10. Choose imagery that reflects your brand. If you're selling skateboards to teenagers then grungy is cool but for most professional services you want to use images of clean, vibrant people in nice clothes. If you're audience includes parents, use images of clean, happy, laughing kids. Perhaps this is obvious but I mention it because I have gotten images to post of kids with dirty clothes and fingernails. That's not what you want your precious company image associated with.

That's just the tip of the iceberg as far as web imagery goes but I hope you'll find it useful and thought provoking. I'd love to hear your ideas too, feel free to add them to the Comments below. Thanks for your time and here's to making a better web for everyone.

​Ame Stanko is the web developer/designer/graphic artist/geek behind Pixel Lava Interactive and has created hundreds of websites since she ventured on to the interwebs in 1997. ​
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    Blog

    Ame Stanko, San Diego Web Designer

    About the author

    As the owner of Pixel Lava Interactive I've helped hundreds of small businesses and nonprofits with websites, graphic design and more. I hope you'll find this blog full of useful information.
    ~ Ame Stanko
    Mailing List Sign Up
    Subscribe

    RSS Feed

    Categories

    All
    Announcements
    Community
    Digital Summer Camp
    DIY
    DIY Marketing
    Email Marketing
    Featured Projects
    For Nonprofits
    Fun Stuff
    Happy Holidays
    How Tos
    HTML Is Not So Scary
    Industry Musings
    Interwebs 101
    LGBT Business
    Marketing Ideas
    Monday Motivation
    New Products
    Newsletters
    Nonprofit Marketing
    Online Marketing
    Partner Program
    Pixel Lava Unplugged
    Product Updates
    Promo Ideas
    Reviews
    Scam Alerts
    Small Business Inspiration
    Small Business Marketing
    Social Media Marketing
    Tips & Tricks
    Training
    UI/UX
    Webinars
    Web Labs
    Website Workshops

    Archives

    June 2021
    September 2020
    August 2020
    December 2019
    March 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    July 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    June 2017
    May 2017
    January 2017
    December 2016
    November 2016
    August 2016
    June 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    June 2015
    May 2015
    April 2015
    March 2015
    February 2015
    January 2015
    December 2014
    October 2014
    April 2014
    January 2014
    December 2013
    November 2013
    October 2013
    July 2013
    January 2013
    December 2012
    September 2012
    April 2012
    March 2012
    February 2012
    January 2012
    December 2011
    October 2011
    February 2011
    December 2010
    October 2010
    December 2009
    October 2009
    February 2009
    December 2008
    December 2007
    December 2006
    December 2005

Home  |  Websites  |  Graphic Design  |  Marketing  |  Training  |  About  |  Shop  |  Contact

©2005-2019 Pixel Lava Interactive. All rights reserved. 🚀

  • Home
  • Websites
    • New Websites
    • Website Redesigns
    • Website Portfolio
    • Website Tune Ups
    • Website Updates
    • Zoom
  • Graphic Design
    • Logo design and brand identity
    • Business Cards
    • Postcards, flyers, ads and more
    • Illustration & Infographics
  • Marketing
    • Seasonal Website Promos
    • Video Holiday Cards​
    • Video & Motion Graphics
  • Training
    • Online Event Hosting
    • Web Lab Kits
    • Webinars
    • 1-to-1 Trainings
    • Weebly Training
    • Digital Summer Camp
    • Training FAQs
  • About
    • Blog
    • Client List
    • Good Vibes
    • Review Me
    • Recommendations
    • Partner Program  🔸
      • Partner Portal
    • Adventure Indoor Fitness
    • Pixel Lava Unplugged
    • Art Barn Shop
    • Happy Holidays
    • Happy Halloween
    • Remembering Bob
    • Remembering Mary
    • Sample Store
  • Contact
    • Download page
    • Support
    • Make a Payment