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.

Seek hero images with negative space

Hot Tip #67 is to seek for background images featuring negative space.

Negative space refers to the area of an image surrounding the main subject or object. This can be intentionally shot and cropped to provide a beautiful canvas for your copy — helping prevent overlapping elements:

Negative space reference

If you know your way around Photoshop, start by expanding your hero image canvas to the left or right. Then fill the newly created blank space using the Content-Aware fill option. It’s honestly magic.

  • Unsplash – Free stock image library with tags for “negative space” and “copy space”.
  • Stocksy – Premium stock image library with a useful “copy space” filter with 3 strengths.
  • Negative Inspiration – A collection of 1000+ Landing Pages I’ve curated featuring healthy whitespace (often associated with negative space elements).

Bring it to life

Hot Tip #91 is to bring it to life.

Skeuomorphism is the design concept of making digital items resemble their tangible real-world counterpart.

If you are selling a book, consider using a book mock-up template to bring it to life in your Landing Page:

Book Cover reference

I grabbed this book template from Creative Market and it made a huge difference to the Hot Tips Landing Page design.

Selling a print? Why not put it in a frame and overlay a leaf to really bring it to life:

Print reference

Pre-selling property? Give it life with an aerial view of the desk and the beautiful plans strewn across it:

Print reference

Another trick to bring your offering to vibrant life is to add a subtle drop shadow behind the image, product mock-up, or browser screenshot:

Drop shadow design reference

The above subtleties aren’t noticeable at first but collectively mold into a beautiful Landing Page design, like this:

Drop shadow design reference
  • Unboxshot – A service specializing in stop-motion unboxing animations for your products. Instant delight in your Landing Page.
  • Depth Inspiration – A collection of 50+ Landing Pages I’ve curated featuring a perception of depth within the page.
  • Aerial View Inspiration – A collection of 80+ Landing Pages I’ve curated with aerial view shot.
  • Creative Market – The device mock-ups category is filled with unique options by their community.
  • Device Mock-Up Inspiration – A collection of 150+ Landing Pages I’ve curated featuring device mock-ups.
  • Devices by Facebook Design – Monster collection of mock-up devices in both PNG and Sketch. Ridiculous this is free.
  • Shotsnapp – Brilliant device mock-up tool that works in your browser.
  • Ray – Useful little web app to generate beautiful images of your code snippets. Supports a bunch of languages and features a neat UI options panel including dark + light modes.
  • Rotato – macOS app to generate fancy rotating device mock-ups. Free to try, then $40.
  • Smartmockups – Tool with a more diverse (tees, cups, devices) set of mock-ups. Free for 200 mock-ups then $9/month.
  • Lstore Graphics – Top quality device mock-up resource. Video options too!

The end.

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