Use Google Stitch to Generate Heatmaps to Design High Performing Websites

Learn how to use Google Stitch to create a predictive attention heat map for a webpage, identify where visitors’ eyes are likely to go, and use those insights to optimize a hero section for click-through rate and conversions.

• Anyone with an outdated website
• Designers looking to improve conversion rate optimization
• Website owners with low click-through rates or sales

You will create a predictive heat map and use it to generate an optimized hero section design that focuses attention on your primary call to action.

• A screenshot-based attention audit of your landing page hero section
• A generated predictive heat map
• A redesigned hero section concept in Google Stitch

• A Google Stitch session
• Google AI Studio
• A screenshot of your site’s above-the-fold hero section
• Your primary CTA text, such as “Get Started”
• Optional: a full-page PNG if you want to generate a heat map for the entire landing page

• Download your selected design from Google Stitch.
• Use the PNG and HTML file with your AI coding assistant, such as Replit, to redesign your hero section based on the optimized screenshot.
• If Stitch updates your background hero image, use AI Studio to extract the image from the new design PNG.
• Use the generate variations tool in Google Stitch to explore more options before settling on a final design.