Landing Page Hot Tips v2.0
You are browsing:
Design Hot Tips
Landing Page lessons related to the overall page design. When you are further with your design, kick off the Landing Page Design Checklist.
#81 - Design Tips

Define container width

Hot Tip #81 is to set a maximum width for your content.

Hot Tip #19 referred to setting a max-width for your typography — but what about defining your Landing Page container width?

Container width demo Container fixed width demo
Container fixed width demo

Audiences differ but over 20% of my Landing Page desktop visitors use a 1920px wide monitor.

W3Schools’ stats also indicate bigger resolution browsing is on the rise.

Containing your Landing Page with a max-width will keep elements from floating on big resolutions, preventing a rugged reading experience.

#90 - Design Tips

Alternate section background colors

Hot Tip #90 is to alternate section background colors.

Consider a slightly darker or lighter background color for every alternate Landing Page section. This design tip will also help contain section content better as a visitor scrolls.

Landing Page background color reference Wavy Line reference

To add spice, why not experiment by separating sections using wavy lines (above) or diagonal lines (below).

Diagonal Line reference Diagonal Line reference
  • Wavy Line References - A collection of 10+ Landing Pages I've curated featuring wavy line separators.
  • Diagonal Line References - A collection of 30+ Landing Pages I've curated featuring diagonal line separators.
  • BGJar - Free online tool to create colorful SVG blobs.
#91 - Design Tips

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 Mock-Ups - The device mock-ups category is filled with unique options by their community.
  • Device Mock-Up Inspiration
  • Facebook Devices - 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.