Exploring the Hero Section

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 cape crusader.

The “Hero Section” – also commonly referred to as the “Hero Header” and “Hero Image” – is a design trend that isn't all that new. Soap companies of the 1800's competed vigorously to develop the most effect hero panels on their labels and newspaper ads, featuring lithographs of cute kids, caring mothers and fluffy kittens.

Not a lot has changed there.

For the first time companies were understood the benefits of drawing links between their products and contemporary heroes such as Benjamin Franklin, Horatio Nelson, or the Duke of Wellington – not always with permission.

On the web the hero section is typically a prominent image, slider, text or similar element that has pride of place at the top of your homepage layout and possibly subsequent pages. It is front and center and in your face.

Don't confuse Hero Sections with those large, trendy background images used in lieu of color or patterns. There is always a purpose and focus for these sections opposed to just serving to set a general look and tone.

The Hero Section is not only a visual stimulant but it is also a core tool that is used to not only give the design a focal point but to pull in the masses and get them hooked. The Hero Section is not only the ‘likable protagonist’ in your story, but also the summary in the book jacket that gets you to read on.

The Literary Hero

When I create music videos for artists (maybe you didn’t know I do that) I often find myself being left to my own devices without any concept but my own. I’ve found that looking for unconscious links between song meaning and images not only yields a better understanding of the project, but allows me to create visuals that leave the artists happy.

With web design and specifically with the Hero Section the concept works pretty much the same. Know the past – the hero's backstory – and you can apply it to the present.

_______

Joseph John Campbell introduced the concept of “monomyth” or “the heroes journey” back in 1947. The concept goes as followed:

A hero ventures forth from the world of common day into a region of supernatural wonder: fabulous forces are there encountered and a decisive victory is won: the hero comes back from this mysterious adventure with the power to bestow boons on his fellow man. 

The hero archetype is something that is not only a literary vehicle but also one that has hooks in psychology. Carl Jung described this journey as the process of “individuation”. This individuation of the hero which Jung referred to as the “Self” served as the central archetype of order amongst all the others.

You see this manifestation of the Self often in literature no matter the genre.

The Take Away

In a typical monomyth structure there are three acts, departure, initiation and return. Each act is broken up in phases which when looked at can be applied to the creation and structuring of your site’s Hero Section.

The key things to remember when using literary and psychological attributes of the hero to your sections are:

• 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

Continue reading %Exploring the Hero Section%

by Gabrielle Gosha via SitePoint