Accueil / Réalisations/Patriarche & Co
Retour à la liste

Patriarche & Co

Fond Case study Patriarche
Screen Case study Patriarche

CONTEXTE

Après avoir élaboré sa nouvelle charte graphique, l'agence Patriarche & Co nous a renouvelé sa confiance pour réaliser son nouveau site web. Place au minimalisme, au noir et blanc, à l'image et à une navigation subtile. Découvrez quelques explications à propos de notre travail.

GRID

A l'heure du responsive et de la multiplication des supports, nous avons opté pour une grille modulaire pour afficher le contenu sur la page d'accueil, les réalisations et le blog.

GRILLE RESPONSIVE

Quelque soit la largeur d'écran de l'internaute, aucun espace n'est perdu. La grille s'adapte pour occuper l'espace le mieux possible.

Gif de la Grid

SCROLL

Dans l'optique de faire la part belle aux images, l'interface sait "s'effacer" quand on a plus besoin d'elle. Ainsi, au scroll vers le bas, le menu de navigation ainsi que le footer disparaissent pour ne montrer que l'essentiel : le contenu.

SCROLL VERTICAL

Le système détecte quand l'internaute descend dans le site et masque le header et le footer de manière progressive. L'effet inversé est appliqué au scroll vers le haut.

Ce même principe est appliqué sur l'ensemble du site.

Gif du Scroll

SLIDE

Au clic sur un projet depuis la grille, un effet de slide permet d'accéder au détail du projet : d'abord avec des photos en plein écran, puis à une partie de texte descriptif si l'utilisateur le souhaite.

SLIDE HORIZONTAL

Pour présenter une réalisation, le système affiche un diaporama en pleine page, qui pousse l'ensemble du site vers la gauche. L'effet inverse est appliqué pour revenir à l'ensemble des réalisations.

Ce même principe est utilisé un peu partout dans le site (page équipe, localisation, newsletter, job).

Gif du Slide

RESPONSIVE

Afin d'offrir la meilleure expérience utilisateur quelque soit le support, les éléments de navigation s'adaptent de façon efficace et agréable sur le site.
iPhone responsive

Menu principal

Gif du Responsive

A la manière d'une application native, le menu principal se transforme en "slide panel" accessible sur la gauche sur les supports mobiles.

iPhone responsive

Menu secondaire

Gif du Responsive

Les rubriques parfois nombreuses ne rentrent pas dans un petit écran mobile : elles peuvent alors défiler horizontalement.

Partager