Propositions graphiques Penninghen.fr

La possibilité de deux logos utilisables pour le site penninghen.fr m’a conduit à développer deux approches différentes.
Je me suis basé pour chacune des solutions sur un principe de grille qui permet de valoriser la marque dans le header et d’agencer le contenu de façon originale concernant les zones de contenus.

Sur les pages d’accueil proposées, j’ai favorisé un éclairage sur les projets élèves car c’est ce qui, à mon sens aujourd’hui, apporte le plus de vie. L’actualité de l’école est maintenue en 2position hiérarchiquement.

V1

Un colonnage laissé volontairement apparent, graphique,  rythme les pages.
Il fait écho à la problématique de l’architecture intérieure de jouer de l’espace.
Le contenu s’insère entre les lignes de la grille, ou se suspend à elles, selon que l’on veuille ou non briser la monotonie.
Le logo est entièrement apparent sur la page d’accueil. En revanche, dans les pages secondaires, on pourrait se permettre de le tronquer pour une question d’encombrement, mais aussi esthétique.

penninghen-V1-accueilpenninghen-V1-accueil
penninghen-V1-generique-01penninghen-V1-generique-01

V2

Ici, c’est l’usage du logo minimaliste qui m’a conduit à répartir les contenus dans des blocs carrés.
Ce procédé permet de multiples possibilités de mises en page, à condition d’observer quelques règles simples pour garantir un bon niveau de lisibilité.  
Selon les besoins, la grille système se découpe en 4 colonnes et 5 sur la page d’accueil à titre d’exemple, mais on pourrait en imaginer d’autres à l’avenir, en fonction des besoins.
La mention de la date de création de l’école ne fait pas partie intégrante du header. En revanche un bloc en footer lui est consacré, et constituerait un espace suffisamment fort pour inciter l’utilisateur à visiter la rubrique Histoire.

penninghen-V2-accueilpenninghen-V2-accueil
penninghen-V2-generiquepenninghen-V2-generique

NB

La limite de fold est signalée par le filet rouge à droite sur chaque maquette (base 600 px, en résolution 1024).

C’est bien la police Synthese qui a été utilisée dans mes maquettes. Je me suis toutefois un peu éloigné des usages recommandés pour proposer une évolution.