F&S | Navigation designs

GENERAL INFO

• Icons used: Entypo+ (available at http://fontello.com/)
• Font used: "National" (Victoria's custom font, available here: https://github.com/victoriauniversity/vic-framework/tree/master/client/assets/fonts)

MOBILE (PSD + quick snapshots)

PSD to download: fas-navigation-mobile.psd

Note: Designs are overscaled to make the graphics more visible on the desktop. Relate the sizes to tablet's ones.

1/ Default

After initial load, with viewport aligned to a top of the page.

2/ Default - compact bars

When user starts to scroll down (and viewport is no longer at the top of the page!). All 3 bars will snap to top + button 'go to top' appears.

3/ Expanded breadcrumbs

When user expands the breadcrumbs panel.

4/ Main menu opened

When user opens main menu by tapping the 'hamburger menu' icon.

DESKTOP (PSD + quick snapshots)

PSD to download: fas-navigation-desktop.psd

1/ Default

After initial load.

2/ Search

When user clicks on the search icon.

TABLET (PSD + quick snapshots)

PSD to download: fas-navigation-tablet.psd

Note: Designs target lower tablet's threshold (~ 760px).

1/ Default

After initial load, with viewport aligned to a top of the page.

2/ Compact + Search

Shows combination of collapsed menu, collapsed header (happens when a user's viewport is no longer at the top of the page) and activated search bar.

HOMESITE (PSD + quick snapshots)

PSD to download: fas-navigation-desktop.psd

Note: Ideas for navigation adjustment on the Victoria's homepage ONLY (could be useful for a future redesign).