In the video above you can use the chapters menu to jump to main chapters of the video or use the time code references below to manually jump to parts of the video. The video also has searchable transcripts in the video player. These features are shown below.
If you are looking for a quick tech demo of how to integrate the Header Image Component simply start at 1:18 in the video demo above and you will get a full breakdown of the essentials in less than two minutes.
Then continue on for the remainder of the demo to get a variety of creative design strategy tips and techniques to help provide a world-class visual experience for your site.
The header image component provides a versatile and visually impactful way to set the tone and context for web page content. This demo will show you how header images can be used in either a fixed width or full browser width layout, allowing for creative flexibility in design.
The technical steps for using the Header Image Component are very simple and straight forward. As such, the primary focus of this demo is to show a variety of creative strategies of you can use image styles to set the tone and mood of your user experience. If you are looking for the technical steps you can jump straight to 23:10 in the video above. You will see the steps completed in just a few clicks.
This demo covers various creative strategies like using blurred images, color saturation, and logo overlays to establish the desired mood and branding. The process for implementing header images was shown to be straightforward, leveraging Photoshop templates to easily size and export assets. The demo emphasizes the importance of coordinating header imagery with body content to create a cohesive user experience. The demo highlights the power of the header image component to elevate the visual design of a website through a simple yet effective implementation.
Header Image Component Overview [0:01]
Josh Lomelino introduces the header image component, emphasizing its optional nature but noting its importance for design aesthetics and consistency.
The header image can be used for various purposes, such as Success Path diagrams, and is flexible across different form factors (mobile, tablet, desktop).
The header image can occupy either a fixed size or full screen width, adapting dynamically to the device's size.
Josh demonstrates how the header image component adjusts its size and position on different devices, including mobile and desktop.
Fixed vs. Full Width Header Images [3:21]
Josh explains the two primary ways to use the header image component: fixed width and full width.
A fixed width image is useful for Success Path diagrams, showing the user's progress through content.
The full width image spans the entire browser width, providing a dynamic and adaptive look.
Josh shows examples of both fixed and full width images, highlighting their respective uses and benefits.
Creative Strategies for Header Images [6:58]
Josh discusses various creative strategies for using header images, including blurred images, color saturation, and logo overlays.
Blurred images can set the tone and texture of the page, while color saturation can enhance the mood of different sections.
Logo overlays can be used to show product or company logos, or sub-brands within an organization.
Photographic images, including cropped photography, can create visual interest and set the stage for the content.
Implementation and Exporting Images [10:59]
Josh provides a step-by-step guide on implementing header images, including the best image sizes for full width and fixed width images.
For full width images, the recommended size is 2300 pixels wide by 240 pixels tall.
For fixed width images, the recommended size is around 1448 by 308 pixels.
Josh demonstrates how to export images from Photoshop, ensuring they are the correct size and quality for the header component.
Using Templates and Media Manager [22:49]
Josh explains the use of templates for header images, including full width and fixed width templates.
The templates are structured to allow easy drag and drop of images, with layers for different elements like logos and header images.
Josh shows how to use the media manager to upload and manage images, emphasizing the importance of consistent file organization.
He also discusses the flexibility of using open-source image editing software like GIMP and Procreate.
Coordinating Header and Body Images [36:04]
Josh demonstrates how to coordinate header images with body images to create a unified look and feel.
He explains the process of exporting and uploading images, ensuring they are the correct size and quality.
Josh highlights the importance of file naming conventions to avoid issues with server caching.
He shows how to update and replace images in the media manager, ensuring the new images are correctly integrated into the page.
Creative Freedom and Customization [36:20]
Josh encourages users to explore different creative strategies for header images, including using stock imagery from sites like Unsplash.
He emphasizes the importance of having a clear license for any content used.
Josh demonstrates how to use different effects and adjustment layers in Photoshop to enhance the look of header images.
He shows how to create a visual content brainstorm spreadsheet to plan and organize images for different pages or classes.
Handling Image Caching and Updates [45:00]
Josh explains how to handle issues with image caching, including clearing browser cache or renaming files to force updates.
He demonstrates the process of updating and replacing images in the media manager, ensuring the new images are correctly integrated.
Josh highlights the importance of testing and refreshing the page to ensure the new images are visible.
He provides tips for managing and organizing images in the media manager to maintain consistency and efficiency.
Final Thoughts and Best Practices [49:17]
Josh summarizes the key points of the tutorial, emphasizing the flexibility and creative freedom of the header image component.
He encourages users to explore the examples and templates provided, using them as inspiration for their own designs.
Josh highlights the importance of consistent file organization and proper image sizing for optimal performance.
He concludes with a reminder to always test and refresh the page to ensure new images are correctly displayed.