Présentation du design des sites CLINT 1 GÉNÉRALITÉS 1.1 DESIGN Visuel «léger», «simple» mettant en valeur l accès à l information et l information ellemême. Style très moderne s adaptant à l ensemble des périphériques. Image large sur la homepage. Possibilité de mettre un «slider» (changement automatique d image) ou également de ne pas utiliser d images. Le contenu à proposer ne contient pas d éléments graphiques permettant le développement d un visuel très orienté design. De plus si des éléments de visuel «autres» étaient apportés, ils ne favoriseraient pas la lecture et nuiraient à la lisibilité de l information. 1.1.1 Gestion des couleurs Pour se focaliser sur les fonctionnalités l usage d uniquement 2 couleurs a été opéré. La couleur de base de la caisse (couleur dominante du logo en général) et une couleur du texte grise plutôt soutenue pour les autres. Fribourg et Berne avec un logo en noir et blanc devront subir une recherche supplémentaire ou utiliser la couleur choisie dans le site actuel. La couleur de base sera utilisée pour la gestion des liens sur l ensemble du site. Une couleur différente, blanc, sera utilisé dans le pied de page afin de répondre aux contraintes du contraste. Ceci sera adapté par caisse selon les couleurs. Contraste : Une attention particulière, lors de la conception, a été apportée sur les contrastes. Nous avons testé les choix de couleurs des 2 exemples sur le site : http://webaim.org/resources/contrastchecker/ qui fournit un résultat en fonction des demandes de la norme WCGA (norme d accessibilité). Critère minimum : niveau AA.
Quelques exemples : Gris texte et titre pour tous les sites : #535353 sur fond blanc = contraste OK AAA (minimum 4.5/1 pour niveau AA et 7.0/1 pour AAA) Liens Neuchâtel : fond blanc, écriture 9a052f = Contraste 8.62/1 Pied de page Neuchâtel : fond #535353, écriture blanche = Contraste 7.69/1 Pied de page Genève : fond #002f8f, écriture blanche = Contraste 11.65/1 1.2 POLICE DE CARACTÈRE Police de caractère unique pour l ensemble des sites : Gudea (https://www.google.com/fonts/specimen/gudea) Description de la police : «Gudea is a readable, clear and functional typeface family, with a simple and condensed structure that brings a pleasant feeling when used at any size. Inspired by engineering documentation, it expresses the technical feeling of graphic information enjoyed by those who are interested in areas such as engineering, land surveying and architecture. Initially this type was developed for use in labels and maps, but it is now a versatile family that seamlessly suits any piece of design.»
2 HEADER (ENTETE) Logo dans la partie de gauche (sens de lecture) et liens en accès rapide sur la partie de droite. Comme souhaité, dans l exemple de Genève, est affiché les différentes institutions (exemple le plus contraignant avec les institutions du Jura). Mise en valeur de la section «Formulaires» par une inversion de couleur. Le passage sur ces accès provoquera l affichage visible sur «Calculs en ligne». Menu horizontal affiché en permanence sur l ensemble des sites. La pseudo redondance sur la page d accueil ne pose pas, à notre avis, de problème de compréhension. Un survol du menu ou d un bloc en homepage affiche le «menu étendu». Affichage sur toute la largeur d un écran avec prolongation des différentes bandes et lignes de couleur. Les images finissent en fondu dans une couleur afin de pouvoir répondre à ce besoin. Le couple entête et pied de page «encadrent» ainsi l information. Dans les pages intérieures, il n y aura pas de reprise de l image qui prendrait trop de place (hauteur) et surtout trop de valeur par rapport au contenu. 3 PIED DE PAGE Reprise du gris pour le fond et texte en blanc. Les liens seront en souligné blanc ou encore adaptés selon la caisse. Possibilité de choisir entre 3 et 4 colonnes. Contenu à choix. (4 colonnes visible sur la page intérieure). Affichage sur toute la largeur de l écran.
4 CONTENU PAGE D ACCUEIL Mise en valeurs des 2 accès principaux. Les autres points d accès s arrangent en dessous des 2 blocs principaux et ceci sans limite de nombre. Il est bien entendu qu il en faudrait un nombre pair et que d en proposer plus de 6 poseraient probablement un problème dans le menu principal horizontal. Les images sont proposées à titre d exemple et semble convenir. Il reste évidemment possible d utiliser des images fournies et, le cas échéant, achetées par une caisse. Affichage des 3 dernières actualités. Le passage en 3 colonnes permet de bien différencier les différentes zones de la page.
5 CONTENU PAGES INTÉRIEURES 5.1 BLOC GAUCHE Contenu, mise en valeur des titres, affichage des formulaires. 5.2 BLOC DROITE Séparation des affichages entre une liste de liens et des liens renvoyant sur du contenu (Questions fréquentes et Agences régionales AVS). Légère couleur de fond marquant la différence de type de contenu. Les autres typologies d affichage (formulaires, listes, FAQ, ) seront déclinés sur ces bases lors de la conception des pages.