You are browsing Hot Tips featuring:
Images
Landing Page lessons related to the images throughout the page. When you are further with your optimization, kick off the Landing Page Images Checklist.
#03 - Design Tips

Fewer images, better images

Hot Tip #03 is to use fewer images but also better images.

Good imagery builds trust, and trust is the foundation for conversions. When it comes to your visuals — spend the money!

Dona Rita website Logoswift website

Invest in a photoshoot of your team, your product, your food. The ROI on a professional photoshoot is pretty much guaranteed.

  • ImageOptim – My go-to for image size optimization for JPG, GIF, PNG and SVG.
  • Optimage – An alternative image size optimization tool by Vlad Danilov. Conveniently optimizes MP4 too.
  • Stocksy – My favorite premium resource for stock images. If you only need a single authentic image for your Landing Page, seriously consider starting here.
  • Squareshot – Service to send your physical product and they’ll send back top quality photos of it for your Landing Page.
  • Noun Project Photos – Just launched so a good resource of less-used, quality stock imagery. Pricing is around $33/image for commercial use.
  • Unsplash – High quality, well curated free stock images.
  • Pixabay and Pexels – Both good free stock image alternatives if a search term isn’t winning on Unsplash. Both include stock video too.
  • Team Section Inspiration – A collection I put together with 20+ team sections in Landing Pages.
  • IMGIX – Image CDN’s are a bit excessive in most Landing Pages but I use IMGIX for my full network of sites. The real benefit is you can upload a big image once, then manipulate (size, compression) the output using only code. I cannot recommend it enough and I do use it for Landing Pages within my bigger sites.
#29 - Design Tips

Add personality

Hot Tip #29 is to add personality.

👩‍🎤 A portrait of the person who developed the service.
📑 The desk where these posters were illustrated.
✍️ Even adding a subtle animation of your signature.

Signature demo Signature demo

People want to support people, and these little touches give visitors a glimpse of the human behind the Landing Page.

  • Fiverr – Get an animation of your signature commissioned for $5.
  • VideoTouch — An alternative approach to adding personality where you can have fun explaining the product or service in the corner of the Landing Page. The service is free for up to 5k visits a month.
  • Sign your work – Little 2014 nugget blog post by Seth Godin.
#45 - Design Tips

Don’t neglect Retina optimization

Hot Tip #45 is don’t neglect Retina optimization.

Simply put, Retina Displays have higher density pixels, needing a bigger version of the imagery to appear crisp.

Retina comparison Retina comparison

Clear infographics and crisp app screenshots leave a wonderful first impression, especially if your target market is designers.

  • A guide to <picture> and srcset – Developer Eric Portis details exactly how to deliver @2x images on Retina screens.
  • SVG Optimization Tool – SVG icons are a smart way to keep them crisp on all screens. ImageOptim has an excellent optimization function where you simply drag the SVG file in and it automatically cleans it up.
  • BGJar – Free online tool to create SVG backgrounds, keeping everything crisp on Retina screens.
#60 - Design Tips

Liven with illustrations

Hot Tip #60 is to liven with illustrations.

Illustrated characters, devices, and elements can really bring a Landing Page to life:

Illustration reference

I was going to keep this is a secret but the commercial license for the Hot Tips Ebook fire illustration was $4 on Creative Market. It completely changed the way the product looks and feels within the Landing Page:

Illustration reference

Character illustrations are currently on-trend in SaaS Landing Pages. I’d argue they are becoming generic but definitely still work to brighten a stale page:

Illustration reference

If you have the budget, aim to commission custom illustrations from a designer. If not, these resources are a good place to start:

  • Streamline UX – Vincent and his team have launched an illustration tier to their icon library.
  • Blush Design – Online tool to create, mix, and customize illustrations made by artists around the world.
  • Humaaans – Free library to mix and match illustrations of people. Made for Sketch, Figma, InVision Studio and Adobe XD.
  • unDraw – Royalty-free illustration resource by Katerina Limpitsouni.
  • Illustration Inspiration – A collection of 1500+ Landing Pages I’ve curated featuring a mix of illustrations.

The end.

There are no more Hot Tips to load in this archive.

Next