Du croquis au morceau d'interface

Au cas où vous ne l'auriez pas remarqué, j'adore Inkscape. Je peux me passer de blé dans la vie...mais pas d'Inkscape :D.
D'habitude je fais mes croquis également sur Inkscape. Les outils libres du logiciel ne sont cependant pas des plus optimisés pour réaliser l'idée que l'on se fait du croquis. J'utilise par conséquent Gimp...mais récemment, j'ai découvert Gimp-paint (facilement disponible sur ubuntu)... et me lance dans l'utilisation avancée de myPaint.

C'est ainsi, contrairement à mes habitudes, que j'ai réalisé mes croquis de travail avec myPaint.

Rappel : la majeure partie de mon travail actuel de graphiste est de réaliser du webdesign et du design d'interface de logiciel.


Hier, le but était (entre autre) de réaliser un petit set de mini-icône cliquable pour la prochaine version du logiciel Kameleoon Kinyongia.

Le développeur en charge de la fonctionnalité me fait part du cahier des charges. En retour je lui envoie ce premier croquis :

 Le premier jet est souvent inutilisable tel quel, mais cela permet surtout de savoir ce qui a été omis dans l'information des contraintes, de mettre à plat les éventuels malentendus et, le plus important, donner des idées d'optimisation ergonomique. En résumé c'est un formidable support pour les développeurs.

Le croquis d'après résume cette richesse (si si je vous assure)

Ensuite je lance Inkscape et la seconde série d'essais commencent...

Finalement, ce set sera l'heureux gagnant (la série présente sur la première ligne avec un mixte de la troisième colonne) (oui je l'accorde, c'est subtile...vous voulez un zoom :D ?) :

Ces icônes sont destinées à offrir à l'utilisateur davantage de contrôle sur le positionnement des images avec l'application. Espérons qu'elles seront suffisament parlantes pour êtres comprises instinctivement !

Bonus : les icônes vues dans leur futur contexte (ceci est une maquette)

Barre de progression

Nouveau widget présent pour une fenêtre de kameleoon : une barre de progression !


1. Création des barres avec Inkscape

2. Exportation en png.
3. Importation des png en un fichier dans Gimp.

4. Exportation en .gif (animé).

Le résultat :

Simple et efficace.

Bientôt le rédéploiement du logiciel permettra de voir cette barre de progression dans son contexte !

Kameleoon Oustaleti est enfin sorti, voici la barre de progression dans son contexte :

Imaginez seulement cette même fenêtre avec la barre de progression animée ^^'.

Interface Tutoriel

Vous vous souvenez de Kamelvis ? Il illustrait un tutoriel destiné à guider les utilisateurs de Kameleoon.

Voici les différentes étapes de l'apparence de ce tutoriel et vous découvrirez au passage le nouveau visage du petit chaméléon.

Tout fut entièrement réalisé avec Inkscape et ensuite découpé avec Gimp.

Boutons

Actuellement je travaille sur l'interface d'un logiciel.

Voici juste le bouton off en 3 états :
- normal inactif ;
- activé par le survolement de la souris ;
- cliqué.

 

Ils sont mimi non ^-^' ?

Entièrement réalisé avec Inkscape.

Si nous travaillions en openspace...

plaquette commerciale

Travail du jour. Réalisation d'une plaquette commerciale. Format A4. Outils : Inkscape, Gimp et Scribus.