Wireframes should be considered as the main reference. Mockups are interpretations of them and sometimes some UI specific adjustements has been done. Feel free to adapt in the same way. Prototypes were developed in order to validate the responsive behaviour. The toolbox should also help to adapt with the responsive behaviour. Content like images, text and icons will be provided by Manulife.
1. PROTOTYPES
Prototypes are tested on Chrome only. The front-end team is not involved in the production of code for creative prototyping. The HTML markup, the JavaScript and CSS are not suitable for production and does not reflect the quality of such code. Please be aware of those limitations. Consider the prototypes as animated mockups closer to the reality than still images like PSDs.
Finally, prototypes are, by essence, imperfect. Please, try to refresh and/or change the size of your browser if bugs or glitches are encountered.
It is possible to drag an image on the header in order to verify if the final content is suitable for this use (images should be chosen or adapted to work with the foreground title).
The menu is functional (except for links).
Responsive behaviour is functional, but some glitches appears around 600px due to the scrollbar. Alt + Click on any neutral area of the page will show the settings menu and a link (minified and QR coded) is displayed in order to test the prototype on tablets.
Tiles in the mosaic are editable (see the toolbox).
The sticky navigation behaviour and the catfish behaviour are simulated.
Feel free to enhance animations and transitions.
Please refer to the detailed toolbox for bugged or missing behaviours.
In the desktop mobile simulator, there is an hidden menu on roll over the top right corner. There is a "copy URL" item in this menu that let you test the page on a real device through a QR code or a minified link.
Menu is functional but there is a bug when the menu is closed (scrolling inside overflow hidden element).
Animated sequences (JPG) could replace still images in the header if needed.
In the header, there is an horizontal icon bar that should scroll but does not in this prototype. This should be done with the native "overflow-x: hidden;" attribute in CSS (no needs for an external library or custom scroll bar).
In the "Services" section the carousel did not work in that prototype but should work in production.
2. KEY MOCKUPS
Those mockups aims to represent a variety of situation that would help to build all pages. There are variations:
with or without header picture,
with or without third level menu,
simple content as well as complex
*etc.
Please, refer to the prototype for the navigation bar and the footer (those elements coud be different in the mockups).
For more details on specifics components, and for responsive behaviour of those components, please refer to the detailed toolbox.
