Hii!!!!cônes

Création et analyse d'icones


Icones de fonction:

Voici différentes icones de fonction créées pour les besoins d'un logiciel sur les premiers secours.

1. 2. 3. 4. 5.
icone icone icone icone icone

Analyse
A quoi servent ces icones, quelle est leur fonctionnement.
Le logiciel dans lequel elles apparaissaient, mettait en scène un accident de la route. L'utilisateur devait alors faire appel à ses connaissances de premiers secours pour venir en aide au blessé. Une fois l'animation de l'accident terminé, l'utilisateur devait commencer par choisir une des procédures. C'est là qu'apparaissaient les icones. Chacune représentait une des actions à faire de manière à accomplir les premiers secours. La fonction de chacune des icones étaient donc de passer à une sous-procédure précise, d'accéder à une certaine partie du logiciel. En ce qui concerne l'ensemble des icones, elles sont crées de la même manière. Le fond est en gris afin d'être de couleur neutre et aussi de la même couleur qu'une route bétonnée telle que l'autoroute. C'est la présence des traits blancs qui fait apparaître la route. Les personnes sont représentées par un rond noire et des rectancles noires liés. La taille du cercle qui fait office de tête est plus grande proportionnellement que celle d'un être humain. L'homme debout est le sauveteur, en opposition avec celui qui est couché qui est le blessé. La voiture est une silhouette noire pleine vue de profil. La borne de secours est représentée par une ensemble de rectangles oranges (elles sont de cette couleur en Suisse) avec écrit dessus "SOS" et avec un combiné et des touches (petits points noir). Le triangle de panne est représenté par une triangle rouge creux. De manière générale le but était de symboliser des situations particulières. La taille d'une icone ne permet pas de mettre des dessins compliqués si l'on veut qu'elle soit compréhensible. De ce fait nous avons essayé de simplifier les dessins au maximum afin qu'il n'y ait que l'information absolument essentielle présente et non des détails superflus. Les têtes ont été exagéré de sorte que l'on reconnaisse bien une silhouette humaine. Ce procédé est aussi utilisé dans des panneaux de signalisation routière comme par exemple ceux indiquant des travaux ou encore sur des affiches. La signification, fonction de ces icones en-dehors du logiciel ne serait peut être pas évidente, toutefois nous les avons conçus dans le but précis d'être utilisé dans le programme qui représente un contexte bien particulier connu de l'utilisateur avant de débuter le logiciel. Voyons maintenant plus en détail chacune des icones.

  1. icone Celui-ci montre un homme entrain de pousser un véhicule automobile hors de la route, il représente la procédure "déplacer des véhicules hors de la route".

  2. icone Celui-ci montre un homme tenant un téléphone à une borne de secours sur laquelle est inscrit "SOS". Cette icone représente la procédure "donner l'alarme", le sauveteur appelle la police pour l'informer de l'accident.

  3. icone Celle-ci montre le homme agenouillé près d'un autre homme couché avec une voiture dans l'arrière fond. Ce dessin représente la procédure administrer les premiers secours. Le sauveteur est agenouillé près du blessé et l'examine selon la procédure RRSS..

  4. icone Cette icone montre un homme le long de la route tenant un triangle rouge dans la main avec une voiture en arrière plan. Ceci représente l'action "protéger les lieux de l'accident"

  5. icone Cette icone montre un homme tenant un autre qui est allongé sur une route et de côté on aperçoit une partie d'une voiture. L'action symbolisée est celle de "mettre le blessé à l'abri ". Le sauveteur tire le blessé en-dehors de la route, en effet la direction de ses mouvements va dans la direction opposé à celle de la voiture.

Technique:
Au niveau technique ces icones ont été réalisées au moyen du logiciel de Paint Shop Pro. La principale difficultée technique rencontrée a été de faire des dessins sur une dimension aussi petite. En effet il fallait dessiner au pixel près, travailler de manière très précise.

Icones de marquage

Voici différentes icones de marquage servant à marquer l'identité de personnages du Tecfamoo.

1. 2. 3. 4. 5.
icone

icone

icone

icone

icone

Elles peuvent être utilisées pour dans l'interface Web du Tecfamoo (porte 7778), pour indiquer par exemple l'appartenance de différents objets, pièces, verbes, etc. Ces icones n'ont de sens ou sont reconnaissables uniquement dans le contexte du TecfaMoo.
Rappellons que le TecfaMoo est un environnement virtuel sur lequel peuvent se connecter différentes personnes correspondant chacune à un personnage. Ces personnages peuvent créés des objets, des pièces, des verbes, etc. On peut accéder à certaines informations sur ce Moo au travers du Web. L'idée de ces icones est de les mettre sur toutes pages correspondant à des objets, verbes, pièces crées par ces personnes. L'information visuelle qui serait alors fournie serait celle de l'identité du personnage créateur, possesseur.

Réalisation
L'idée principale pour la création des ces icones étaient de mettre dans le peu de place disponible, les éléments, les informations essentiels permettant de comprendre ces icones. Il a donc fallut trouver dans un premier temps quelles seraient ces informations là.
Puis pour réaliser ces différentes icones, j'ai soit utilisé des images qui existaient déjà et les ai retouchées (merci Photoshop et Paint Shop Pro), soit je les ai moi-meme créées. Toutes les images utilisées sont des dessins et non des photos. En effet des études ont montré que le taux de reconnaissance d'un dessin est supérieur à celui d'une photo.
Pour chaque icone j'ai les informations ou dessins sont centrés, le fond dest une couleur unie afin de mettre en évidence les dessins. Peu de couleurs différents sont utilisées afin de simplifier la représentation au maximum.
L'idée était de retranscrire une information symbolique, soit un nom de personnage, à travers une image analogique. Ainsi prenons un exemple le personnage "Abeille" renvoit à une personne précise dont le vrai nom n'est pas celui-là. Ainsi "Abeille" renvoit à une personne mais aussi à un insecte. Le mot "Abeille" est un signifiant, le signifié est la personne et le référent (ou classe, catégorie) est l'insecte volant et butinant dans les champs. La représentation que je fais est celle du référent et qui dans un contexte précis renverra au signifiant.

Petite analyse de chaque icone:

  1. iconePour "Bambi", l'image du personnage principal du film de Walt Disney, Bambi. Dans ce cas-ci pour comprendre à quel personnage, cette icone se réfère, il faut avoir vu le film. Dans ce cas, le référent est donc un personnage de film.

  2. icone Ici c'est un dessin simplifiée d'une abeille. Les éléments permettant de reconnaitre l'abeille sont les ailes (ovales blancs), le corps zebré de jaune et noire, l'extrémité du corps aboutissant au dard (méfiez-vous en été pieds nus dans les prés), et la tete et ses antennes (cercles blancs). De plus sur le visage, j'ai rajouté deux yeux (taches noires) et une bouche souriante (demi-cercle) donnant aspect sympathique à cette abeille.

  3. iconePour "Surfer", le référent est quelqu'un entrain de surfer. Ici j'ai mmélangé un extrait d'une estampe japonaise, la Vague de Hokusai et un dessin fait par mes blanches mains. Le dessin du surfeur meme est très shématisée, simplifiée, une silhouette en "fil de fer".La planche de surf est une courbe.

  4. iconePour "Kaspar", c'est grace a son statut dans le moo, archiwizard ou grand magicien que l'on peut le reconnaitre. La variable visuelle du magicien est le grand chapeau pointu, la baguette magique et la longue barbe (ca tombe bien parce que justement Kaspar en a une ;-). Ici j'ai essayé de reprendre des éléments caractéristiques d'un magicien. J'ai dessiné une baguette, travaillé un dessin de chapeau et un fragment de visage d'un dessin de Gandalf (grand magicien, cf Le Seigneur des Anneaux). La juxtaposition de ces trois éléments sont censées signifier "magicien". Or le magicien sur le Moo est Kaspar

  5. iconePour "Litteul_apple", c'est le meme principe que pour "Abeille". Toutefois au lieu de mettre simplement un dessin de pomme, j'ai rajouté des yeux (les cercles) et une bouche (souriante" (le demi-cercle". Ceci permet de donner une dimension "vivante" à un fruit. <

Conclusion

Il n'est pas évident, ni aisée de créer une icone qui soit compréhensible, qui signifie quelque chose de pertinent, qui ne soit pas totatement illisible de par sa petitesse, etc. Toutefois une bonne réflexion précédent la création, de meme que beaucoup de temps devraient vous aider.


Retour à la page de Staf 13 Retour au tout début
Y.P.S.