Hero Images

Definition

Hero images are the main visual elements at the top of each page, used to immediately confirm to visitors that they’ve arrived on the right page. Combined with the headline (H1) and motivating factors, they form the foundation of the 3-30-3 Rule, helping users stay, engage, and convert within the first few seconds.

This post covers the hero images only. For Background Hero Video images, please refer to their dedicated guidelines.

Hibu One Smart Site Rules

• Each page must include a unique hero image to distinguish navigation and reinforce page relevance.
• Recommended minimum size: 1920 × 1280 px (full-width hero).
• Avoid using images that contain text, signage, or customer branding, such as storefronts or vehicle graphics. These elements distract from the message and compete with on-page text.
• Client-supplied images featuring signage, trucks, or team members may be featured elsewhere on the site — such as the Introduction Text, Why Choose Us, About Us, Contact Us, or Team pages — where they can provide authenticity without compromising the hero layout.
• For transparent header designs, ensure the top ¼–⅓ of the image remains uncluttered so navigation and text stay readable.
• Hero images must always support text and call-to-action (CTA) readability.
• Close-up or texture-based images (e.g., shingles, brick, flooring, cables) often work best — they convey the industry while maintaining a clear space for text.

Legacy Image Policy

• Older assets from narrow or outdated layouts (e.g., 960px designs) may appear blurry or stretched on modern layouts.
• Low-quality or small images are not reused as hero images. A higher-resolution version is required for hero use.
• If a client-supplied image is excluded for quality reasons, designers must log the assumption, notify the DSC, and ensure it’s communicated to the client.
• Legacy or lower-quality images may still be used in galleries or secondary content sections.

Overlay and Background Overlay Guidelines

• A dark overlay can improve text readability, especially when client-supplied images are too bright or low in quality.
• Designers may use dark purples, reds, blues, or greens when they complement the client’s brand; black or gray are not required defaults.
• Overlays should maintain balance:
• Text must be easily readable.
• The image should remain visible — if details disappear, the overlay is too dark.
• The overlay should complement, not overpower, the design.
  

Hero Form Considerations

• A Hero Form may be added by request on the homepage, category landing pages, or key service/product pages.
• When a form is present, designers must select or adjust the hero image to ensure all text and form elements remain clearly visible and balanced.
• Avoid busy or high-contrast areas behind form fields or buttons.
• The combined layout — image, text, and form — must maintain visual clarity and brand consistency across screen sizes.
  

Composition and Cropping

• Position hero images with the top fixed to prevent important elements (like heads, logos, or products) from being cropped at different screen resolutions.
• When an image lacks text or has open visual space, reversing (mirroring) the image may improve composition and highlight its focal point.
• Choose images that balance focal subjects and open space for overlays, headlines, and forms.