The aim of this guide is to provide you with a visual illustration on everything that is possible to have on your career hub. This will help you gain and translate ideas on how you want to display your content. Never forget that your career site will be fully branded with your fonts and colours :)
Anatomy of a Page
Before delving into the visual illustrations on everything that is possible to have on your career hub, let's highlight the fundamental structure of all pages. Each page will consist of a Bar Menu, a Hero section, Page Content or Body, and a Footer section, as illustrated below.
Menu Bar
The menu bar plays a central role in ensuring a user-friendly and organised navigation experience for visitors. As a result, this essential component will be consistently present on every page to facilitate seamless site navigation for candidates.
On the left-hand side, we will have your logo followed by the categories of your pages.
When candidates navigate the site, they can seamlessly return to the home page by clicking the logo, and hovering over the categories will display a dropdown menu with the list of all pages in that category.The 'box' containing the list of pages has light rounded corners in this guide, as it aligns with the chosen brand guidance. However, it can have sharp corners if it better suits your brand. Please see the two options below. (maybe add Superdrug example which shows bigger rounding).
On the right-hand side, we have the main call-to-action button, which we called 'Search Page' (but you can name it as you please).
This button will lead the candidate to the main job search page, and there is the option to add another call to action if you have a candidate portal too. The call-to-actions will also feature rounded or sharp corners, depending on your brand guidance.
The menu can be simply displayed over the hero image (big image at the top of the page), or it can be highlighted in your brand colour (or is it always black?). If you choose the last option, please consider that the hero will be slightly cropped. Please see example below:
Hero
The hero is the large image at the top of the page; this image (video or gif) is quite important as it sets the tone of the page.
