Crafting the perfect motion driven header

If you aren’t showing and telling customers exactly what you sell in your header, you are leaving money on the table – especially if your product visual and can be more clearly communicated with the use of motion.

Here’s 4 Tips for a motion driven header:

1. Motion in the form of gifs/video/animation can be a visual powerhouse – which means keeping the rest of the design system very simple. The use of a second brag bar or segmented cross-section for your social proof is a great way to keep copy separate in a way that lets the motion speak for itself!

2. Show your product clearly rather than assuming users know what you make. In this case, the function of the product is super simple and visual so motion is the best communicator possible. If the GIF can explain the product better than a flat image, the answer is always yes.

3. Make sure your headline acts as the explainer line for the gif or video – a perfect 1-2 punch of product communication. It’s great to get users excited about it being new and exclusive, but you can’t forget to also communicate what it is.

4. Make user engagement easy by ensuring your key actions are full width on mobile and sit at the bottom of the fold. The bottom should also be used as a communication point – rather than ‘reserve’, tell them what they are reserving!

Want us to look at your website? Grab a FREE quick win or book a call to chat with our team!