Andrea Delage 2018

Layout Color Typography

Andrea Delage 2018

Hierarchy of importance: Where is the important stuff? First Law of (cognitive) Geography Grouping and Separating Logical flow Positioning / Zoning Spacing

Andrea Delage 2018

Andrea Delage 2018

Place the main zones: Where am I? Where can I go? What is here?

Andrea Delage 2018

Where am I?

Where can I go?

What is here?

What is here?

What is here?

Andrea Delage 2018

Site name Site description Logo Page title (Location in the site) Breadcrumbs

Andrea Delage 2018

Hierarchical Global Local

Menus Breadcrumbs Sitemap

Andrea Delage 2018

Navigation bar Dropdown menu Fly out menu Anchors / links Sitemap

Search

Andrea Delage 2018

Top above header Top below header Left Right

Floating or fixed

Global or local

can be combined as needed

Andrea Delage 2018 Copyright: Microsoft Corporation

Level 2 navigation (local)

Internal anchors = level 3 navigation (local)

Main menu

Breadcrumbs

Search

Internal links

Andrea Delage 2018

One-level (navigation bar) or multi-level Visible levels or pop-up menus Context menus With or without Short-cuts (for desktop applications) Icons (rarely useful in menus)

Andrea Delage 2018

Fast-disappearing of difficult to click pop-up menus

Short links like: "Visit the site of the soccer club here"

Hidden navigation Unhelpful icons Confusing menu entries or category names

Andrea Delage 2018

Hierarchical representation of a site's structure

Overview of the global site navigation => How are the pages related?

Andrea Delage 2018

Even the best navigation never makes a user come to a site. (S)he comes for content.

Andrea Delage 2018

It's not the user's job to scan our site for useful information. It's our job to make the information as visible as possible.

Andrea Delage 2018

Modern websites use grids to layout pages. Grids give structures. Grids allow high flexibility and responsiveness. Grid lines are most often invisible but their

position is easy to see.

Andrea Delage 2018

A grid is a set of invisible lines that all elements are aligned with. A grid is composed of columns gutters horizontal bar (optional but very

common)

Andrea Delage 2018

Andrea Delage 2018

Image from the Google Material Design guidelines

Andrea Delage 2018

Andrea Delage 2018

separating bar

group group

unrelated items

Andrea Delage 2018

Making a web page look good on all devices

in both orientations

portrait

landscape

Andrea Delage 2018

Mobile first

Andrea Delage 2018

Andrea Delage 2018

small screen large screen

Andrea Delage 2018

small screen large screen

Andrea Delage 2018