As defined by the Oxford Dictionary: Hero /ˈhirō/ (noun)
:A person, typically a man, who is admired or idealized for courage, outstanding achievements, or noble qualities
:The chief male character in a book, play, or movie, who is typically identified with good qualities, and with whom the reader is expected to sympathize
:(In mythology and folklore) a person of superhuman qualities and often semi-divine origin, in particular one of those whose exploits and dealings with the gods were the subject of ancient Greek myths and legends.
These are all definitions to a word derived from the Ancient Greek word ἥρως which means heroes. A word that has a rich history dating back to a time where Gods clashed with mythological beasts and championed heroes to fell nasty foes on a path of destruction.
But what does the etymology and history of such a word have to do with web design? In short, if you know how to make mortar you can build something a lot more effective than a straw hut.
What is the Hero Section?
Sad truth time: the hero section has nothing to do with your favorite comic and movie heroes. That means no Batman, Hellboy, Ironman, Doctor Strange or any other caped crusader.
![Wellington, Nelson and Franklin promoting products.](https://uploads.sitepoint.com/wp-content/uploads/2015/07/1436858232heros.jpg)
The Literary Hero
![Batman, Hellboy etc](https://uploads.sitepoint.com/wp-content/uploads/2015/07/1436771065download-e1436771377191.jpeg)
![The Heroes Journey: 8 Steps](https://uploads.sitepoint.com/wp-content/uploads/2015/07/1436771039download-1.png)
- The hero is idolized and is a chief player in the world they inhabit
- The hero’s journey is a journey of purpose, from start to finish
- The myth of the hero is consequently the beginning step to finding the true “self”
- The end product or individuation of the hero is as important as the rest of the story
Applying the Literary Hero to the Design
![Website: Limitless Header and Hero](https://uploads.sitepoint.com/wp-content/uploads/2015/07/1436771060download-3.jpeg)
- The literary hero usually starts out as the “Average Joe” – Frodo from the Lord of the Rings for instance – but increasingly stands out from the crowd as the story progresses. Work this idea into your Hero Section by creating contrast within and and around it. Make your hero visually distinct.
- While the hero’s journey does typically follow a notable formula you should make a conscious effort to design your own “path”. Don’t feel pressured to use common layouts. Try something different.
- In the hero’s journey no task is without cause. Your Hero Section should always serve a purpose. When designing make sure there is destination. That could be a problem solved, a fear allayed or even just ‘longer, fuller hair‘.
![Website: Longer fuller hair.](https://uploads.sitepoint.com/wp-content/uploads/2015/07/1436771678hair-e1436771708488.jpg)
![Rent the Renovator](https://uploads.sitepoint.com/wp-content/uploads/2015/07/1436771685rent-e1436771718706.jpg)
- Though not all literary stories come with big, powerful demi-gods as heroes, they do have heroes who become bold by the end. Translate this idea by using big, bold typography for your titles.
- Whether as a literary or psychological vehicle the hero helps lead the story. When picking images make sure they help move your “story” along.
![Game splash screen: League Legends](https://uploads.sitepoint.com/wp-content/uploads/2015/07/1436836983league-e1436837039622.jpg)
- Like literature, see your design as a story. Each element is a chapter so give proper consideration to produce logical flow in design that not only tells your story but also tells the visitor where to go next.
Great Heroes Always Tell Stories
![Website: Be My Eyes](https://uploads.sitepoint.com/wp-content/uploads/2015/07/1436771051download-2-e1436835986501.png)
![Website detail: A network of eyes](https://uploads.sitepoint.com/wp-content/uploads/2015/07/1436836849bemyeyes-2-e1436836894652.jpg)
Conclusion
It may seem a stretch to most to apply something not design related to the development of a site but unconscious links can be just as valuable as conscious runs. If anything, you can say you at least tried a new method of development. Try it out, you never know what good may come out of it. Have you ever used unconventional methods when it comes to designing hero sections? Let us know.Frequently Asked Questions (FAQs) about Hero Sections
What is the importance of a hero section in a website?
The hero section is the first thing visitors see when they land on a website. It plays a crucial role in capturing the visitor’s attention and conveying the main message of the site. A well-designed hero section can increase user engagement, reduce bounce rates, and improve conversion rates. It’s an opportunity to make a strong first impression and guide visitors towards taking a desired action, such as signing up for a newsletter or making a purchase.
How can I make my hero section more engaging?
There are several ways to make your hero section more engaging. Firstly, use high-quality, relevant images or videos that resonate with your target audience. Secondly, craft a compelling headline that clearly communicates your value proposition. Thirdly, include a clear and concise call-to-action that guides visitors towards taking a desired action. Lastly, ensure your hero section is responsive and looks good on all devices.
What are some common mistakes to avoid when designing a hero section?
Some common mistakes to avoid when designing a hero section include using low-quality images, overloading the section with too much information, using vague headlines, and not including a clear call-to-action. It’s also important to avoid making the hero section too cluttered or complicated, as this can confuse visitors and deter them from exploring the rest of your website.
How can I optimize my hero section for mobile devices?
To optimize your hero section for mobile devices, ensure your images and text are responsive and scale properly on smaller screens. Use larger fonts and buttons to improve readability and usability. Also, consider the load time of your hero section on mobile devices and optimize your images and videos to ensure they load quickly.
Can I use a video in my hero section?
Yes, using a video in your hero section can be a great way to engage visitors and convey your message in a more dynamic and interactive way. However, it’s important to ensure the video is high-quality, relevant, and not too long. Also, consider the load time of the video and ensure it doesn’t slow down your website.
How can I test the effectiveness of my hero section?
You can test the effectiveness of your hero section by using tools like Google Analytics to track user engagement and conversion rates. You can also conduct A/B testing to compare different versions of your hero section and see which one performs better.
What should be the size of the hero section?
The size of the hero section can vary depending on the design of your website and the message you want to convey. However, it’s generally recommended to keep your hero section above the fold, meaning it should be visible without the visitor having to scroll down.
Should I include social proof in my hero section?
Including social proof in your hero section can be a great way to build trust and credibility with your visitors. This could be in the form of customer testimonials, reviews, or logos of well-known clients or partners.
How often should I update my hero section?
It’s a good practice to regularly update your hero section to keep it fresh and relevant. This could be when you have a new product or service to promote, a special offer or event, or when you want to test a new headline or call-to-action.
Can I have more than one call-to-action in my hero section?
While it’s possible to have more than one call-to-action in your hero section, it’s generally recommended to have a single, clear call-to-action to avoid confusing your visitors. If you have multiple actions you want visitors to take, consider using a primary and secondary call-to-action.
![Gabrielle Gosha](https://uploads.sitepoint.com/wp-content/uploads/2014/07/1404528241default-96x96.jpg)
Gabrielle is a creative type who specializes in graphic design, animation and photography.