graphisme "Créa 1"

Le kit d'interface graphique "Créa 1" est constitué d'une bibliothèque d'objets graphiques. il s'utilise tel un habillage de type "skin" car il se situe sur la couche la plus externe de l'application.

Cette page réalisée au standard html et css est un exemple concret des possibilités offertes par l'utilisation des différents objets constituant l'interface graphique "Créa 1". Le graphisme est de type ouvert pour préserver la richesse du graphisme en évitant de s'enfermer dans des blocs. Le créateur d'application utilise les objets graphiques mis à sa disposition, comme un légo en habillant les menus, tableaux, listing, messages de son application à sa convenance. il obtient ainsi un visuel professionnel et peut se recentrer sur son métier d'informaticien.


L'interface est constituée d'objets graphiques classés par catégories : bouton, tableau, fond, séparateur, pictogramme, etc..

bandeau de Menus

La gestion des menus de type bandeau reste classique, cela permet de présenter à l'internaute une interface habituelle. La structure graphique permet de gérer plusieurs lignes de menus.

Lexemple ci dessus présentent les possibilités avec un marquage du menu actif et un état de survol sur le premier bandeau.

Boutons de menu

Les boutons dédiés aux menus sont de type ouvert, c'est à dire non enfermés dans des boites pour que l'interface soit plus aérée, ils sont classés en plusieurs catégories

• Boutons positionnés au dessus du texte
• Boutons positionnés à gauche ou à droite du texte

Chaque bouton peut avoir un état différent selon l'utilisation souhaitée
bouton Actif-Select pour identifier le menu en cours, bouton Estompé pour masquer un menu non disponible, bouton actif pour changer de menu., bouton Survol pour la gestion du positionnement de la souris au dessus d'un bouton. Ces différents états peuvent être aussi utilisés dans des fonctions de survol d'un bouton avec changement graphique associé

Planning

Boutons de Navigation

Les boutons de navigation sont utiles pour faciliter la navigation de l'utilisateur dans un espace à plusieurs dimensions. Ils peuvent être utilisés pour la présentation de listing multi-pages.

On les retrouve sur le fond de page car ils ne doivent pas être mélangés aux informations des tableaux.

Boutons de validation

Les boutons de validation sont au dessous des boites de messages ou des tableaux.

On les retrouve sur le fond de page car ils ne doivent pas être mélangés aux informations des tableaux.

Tableaux

L'habillage des tableaux se compose de plusieurs éléments :

• Ligne de titre
• Lignes de Cellules du tableau
• Lignes de séparation horizontale
• Objets à intégrer tels que boutons, cohes, indicateurs
• Ligne de pied de tableau

Une ligne de titre est composée de 3 objets : coté gauche, titre, coté droit
Une ligne de cellules est composée de : coté gauche, cellules, cellule active, cellule busy, cellule de listing pair, cellule de listing impair, coté droit.
Une ligne de séparation se comporte de la même manière qu'une ligne de titre avec la possibilité d'intégrer plusieurs colonnes comme les jours de la semaine du tableau ci-dessous ou une seule colonne comme la liste des créneaux.
une ligne de pied de tableau est composée de : coté gauche, pied, coté droit

Exemple de tableau - Gestion de planning
Ce tableau utilise les objets graphiques tels que ligne de titre, ligne de séparation avec partie marquée, cellule, cellule stabilossée, ligne de pied de tableau

Exemple de tableau - Gestion des dates
Le tableau ci-dessus présente les mois avec des séparations et des boutons aux extrémités de la ligne de séparation.
Les objets graphiques utilisés sont ligne de titre, ligne de séparation avec partie marquée, Séparation colonne, boutons de ligne de séparation, ligne de pied de tableau.

Exemple de tableau - Listing
Ce tableau dédié au listing d'information utilise les objets graphiques tels que ligne de titre, lignes de séparation, colonnes de séparation dans la ligne de séparation, cellules paires, cellules impaires, objets coche et bouton de ligne de titre, ligne de pied de tableau.
Pour une meilleure compréhension des lignes cochées, une légende des objets sur fond de page est présente en dessous du tableau.

tableau - boites de message

Les boites de messages d'information se composent avec les mêmes objets que pour constituer les tableaux, en y incluant des boutons pour réaliser certaines actions. On y retrouve les objets suivants :

• Ligne de titre
• Lignes de Cellules du tableau
• Objets à intégrer tels que boutons, coches, indicateurs
• Ligne de pied de tableau

Exemples de messages d'information
Ce tableau d'information utilise les objets graphiques tels que ligne de titre, cellules , ligne de pied de tableau.

tableau - Objets intégrés

Objets présents dans les tableaux et messages

Pour que les tableaux puissent être dynamiques, on y intègre les objets suivants :

• Bouton de fermeture avec un état de survol - ligne de titre
• Bouton de fermeture avec un état de survol - ligne de séparation
• Boutons de type flêche dans les 4 directions - ligne de séparation
• Case à cocher pour marquer l'information
• Boutons rond avec texte acollé
• Boutons avec texte à intégrer
• Et l'ensemble des pictogrammes

Messages - sans ligne de titre

La classe des objets messages n'a pas d'entête de ligne de titre comme les tableaux, néanmoins elle se comporte de la même manière et permet de présenter de l'information en y incluant du texte et des objets tels que bouton, image, etc..

La boite de message est composée de plusieurs éléments :

• Bords haut
• Corps du message avec ses bords
• Bords bas

le contenu du message peut être sur une seule ligne tel un titre ou sur plusieurs dans le cas d'un paragraphe

Boite a contenu avec encadrement

Cette boite permet de présenter des contenus tels que images, vidéo, texte,... avec un habillage adapté au graphisme du kit

( Non représenté sur le site )

catalogue d'objets

Cette présentation est adaptée au listing d'objets d'un catalogue comme la vente de produits.

Le PowerShot A530 offre une sensibilité de 800 ISO, ainsi, vous pouvez continuer à photographier sans flash plus longtemps. Doté d'un capteur 5 millions de pixels et d'un zoom optique 3x, ce petit bijou compact et performant bénéficie d'un excellent rapport qualité/prix.

Ref. PowerShot A530

Séparateurs

Les séparateurs permettent graphiquement de séparer des zones d'information, ils sont discrets en s'intégrant à l'interface.

Puces

Les puces sont utilisables pour marquer une information en début de phrase ou pour marquer chaque début de ligne d'une liste

Pictogrammes

pour agrémenter le contenu et la gestion des applications, des pictogrammes s'intègrent à l'environnement graphique.

...

Exemple d'utilisation de pictogrammes

		Adresse 10 rue Guillaume Farel 92400 COURBEVOIE
		Email
		Fax +33 (0) 1 47 65 57 62
		Horaires du lundi au vendredi entre 9h00 et 18h00

Suite de l'interface

Il existe d'autres éléments constituant l'interface mais ils ne sont pas présentés sur le site