In my company "header" and "banner" are used in the same manner for the area on top of websites that contains a picture and some text. Causing some confusion.
What's the correct term for this area? In my opinion this is the correct terminology:
asked Apr 14, 2017 at 13:52
Add a comment
|
2 Answers
There's not a correct answer for this since as you say, many people call different elements in different ways, specially when they belong to different disciplines.
This a very common scenario in UX, and it's solved by documenting the UI, declaring names for each element of the site, as well as behaviors. Of course, UI documentation is just a sub-set of UX documentation, so keep it simple and to the point.
Now, going to your specific question
As I said, there are many ways to call these elements. One of those is the dreaded concept of "header". The concept itself is quite volatile, since it's based on code rather than UI. Simply put: we'll call it header if the structure (or most of it) repeats itself across the whole site. For example, if we include header.php on all other pages.
If you read the above, you'll understand why many people may call header just to what you call menu.... which may be called navigation by many other people (including myself).
About the banner concept...
A banner can be a flag or other piece of cloth bearing a symbol, logo, slogan or other message. A flag whose design is the same as the shield in a coat of arms (but usually in a square or rectangular shape) is called a banner of arms. Also, a bar shape piece of non-cloth advertising material sporting a name, slogan, or other marketing message.
As you can see, it can include imagery, colors and slogans. HOWEVER, it doesn't mention navigation anywhere, so we can consider this part covered: If it includes navigation, is not a banner.
Additionally, it's quite common nowadays to call that section as "hero" (see definition and examples)
In short
While there's not a 100% correct way to call these elements, it's really important for you and your team to document the project in order to get to a consensus about naming and nomenclature
-
1I didn't know about the term 'hero', seems like the best term after some searching around. Thank you! Commented Apr 18, 2017 at 8:48
Header – site-title/logo + navigation + social icons. Usually, is nested inside the canvas/page container, mobile menu/scrolling header sit outside. ~ Depending upon templates.
Banner – featured image/video/gallery + headline text for each page.
Head – refers to the html element.
found here: https://answers.squarespace.com/questions/153635/what-is-the-difference-between-a-header-and-a-bann.html
Where also I found this, which I think sums up my opinion too:
"Header" and "banner" can be used interchangeably depending on who you are talking to and what you are talking about. Generally the "header" of your site is simply the top of the content, including the banner image, site title and navigation (in some templates). The "banner" usually refers to the image at the top of your site, but some people also use this term to describe all of the content mentioned before.
What you have illustrated in the question seems correct to me.
answered Apr 14, 2017 at 14:11
-
That's what I found too, but that's just the opinion of one person. I think it's confusing to use them interchangeably, because if I want to talk about the total top part I wouldn't use the term 'banner' Commented Apr 14, 2017 at 14:14
-
@GerlofLeuhof in my mind, then you would say header. Banner is more like an image that can be in one or more pages. But every page has a header. Remember only that not everybody is familiar with these terms. For example, when you talk to your clients, they might not know the difference. I found more people explaining this subject and most of them had a similar response. Commented Apr 14, 2017 at 14:18