Capture d'écran de la page d'accueil du site Citti.fr

Citti Architectes est une agence d’Architecture.

Le site vitrine de l’agence avait déjà plusieurs années. Le client a fait appel à nos services afin de moderniser l’interface graphique et de rendre le site responsive.

Mon rôle a été de mettre à jours l’interface et de l’intégrer dans le CMS mis au point et géré par le prestataire Now Editions

Le projet

Logo Citti Architectes
Le logo fourni par le client

Pour concevoir la nouvelle interface, je suis parti du nouveau logo fourni par le client et du contenu de l’ancien site.

À partir du logo, j’ai cherché la palette de couleurs et les polices de caractères (fonts).

Couleurs et polices de caractères

Le choix des couleurs

Pour concevoir la palette de couleurs, je suis parti du logo fourni par le client. Celui-ci est composé des couleurs verte et grise.

  • Le vert est utilisé pour mettre en avant certains mots clés des titres, mais aussi pour certains éléments décoratifs comme les bordures
  • Le gris est utilisé pour les textes

Le vert est utilisé pour mettre en avant certains mots clés des titres
Le vert est utilisé pour mettre en avant certains mots clés des titres

Les polices de caractères

  • Une seule police : Lato

J’ai choisis la police Lato car elle est neutre et d’une excellente lisibilité.

Présentation des réalisations

L’accès aux réalisations se fait en deux temps. Dans un premier temps, l’internaute choisit une catégorie. Dans un second temps, il choisit un projet.

Les réalisations sont classées par thème, lesquels sont composés de catégories. Il y a au total deux thèmes de 3 catégories chacun.

Visuellement, chaque thème se distingue par un titre et un arrière-plan de couleur différent. Chaque catégorie estt composée d’un titre et d’une photo.

Réalisations niveau 1
Le premier niveau est composé de 2 thèmes de 3 catégories chacun.

Une fois la catégorie sélectionnée, nous arrivons sur une page composée d’une liste de projets et d’un slider dans lequel défile les photos du projet sélectionné.

L’internaute choisit un projet dans la liste, le slider se met à jours automatiquement, sans rechargement de page.

Réalisations niveau 2
Le second niveau est composé de la liste des projet et d’un visualiseur.

Sur smartphone, la liste des projets est visible par défaut et recouvre le slider. Un bouton est rajouté pour indiquer à l’utilisateur qu’il peut masquer la liste afin de voir le slider.

Rendu de la page réalisations sur smartphone
Sur smartphone, la liste des projets est visible par défaut. Elle disparait quand l’utilisateur clique sur le bouton ‘projets’.

Résultat final

Résultat final
Résultat final

Téchnologies utilisées

  • Logo HTML5
  • Logo CSS3
  • Logo jQuery
  • Logo SVG