Le logiciel

La guerre des boutons !…

 

Après vous avoir parlé des contraintes que nous nous étions fixées pour développer l’application, je vais aujourd’hui vous décrire notre séance de travail sur la charte graphique de l’application. Oui, on reste dans le thème du graphisme… je ne vous parlerai pas de code (enfin pas trop 🙂 )

Comme je l’avais indiqué dans le premier article, je travaille sous Xcode pour développer le logiciel de montage qu’utilise Hervé.

Xcode est un environnement complet pour le développement d’applications sous OSX et IOS. C’est en gros mon « Photoshop » à moi! 🙂

L’avantage est que Xcode permet de tout faire en mode texte (on code l’interface grâce au langage de programmation) ou d’utiliser une interface graphique pour designer les éléments de l’interface. J’avoue que pour moi, les 2 sont utiles et que je bascule de l’un à l’autre, en fonction de mes besoins.

En mode graphique pour ajouter un bouton, on sélectionne l’objet dans la librairie et on le glisse sur la fenêtre, on peut ensuite lui associer du code pour déclencher une action. Pratique, non ?

Xcode offre plusieurs types de boutons en fonction des besoins :

Les différents types de boutons sous Xcode

 

…Et cela peut suffire au bonheur de beaucoup de développeurs. Mais voilà, je travaille avec un artiste et pour l’artiste, le standard c’est pour les autres ! 🙂 Alors, comment faire du “standard” en customisant ces boutons ? (C’est à dire éviter les boutons qu’on ne comprend pas ou qui clignotent juste parce que c’est joli)

On peut soit le faire par le code (je peux réécrire le code qui dessine le bouton, ou même créer mon propre bouton), mais cela reste fastidieux et pas forcément utile dans notre cas.

Ici, comme nous voulons juste retoucher au look des boutons, il existe un moyen simple de le faire sans code, c’est de poser une image dessus. Cela permet de créer des boutons rapidement et d’être certain du rendu indépendamment de la machine qui le fera tourner (enfin normalement! 😉 )

Donc nous voilà parti pour designer un bouton !

La FORME

Nous avions essentiellement le choix entre un bouton à bords carrés ou à bord arrondis. Après avoir essayé les deux, le bouton à bords arrondis nous paraissait plus agréable à l’oeil.  Notre choix était fait.

La COULEUR

Comme nous avons élaboré un design inspiré de logiciels comme photoshop -à l’interface sombre-, nous voulions trouver une couleur qui retienne l’attention. Nous étions d’abord sur une tonalité noir/bleu, mais cela nous semblait trop froid. Nous sommes donc parti sur une couleur chaude, un jaune d’or.

La POLICE

Le choix de la police est structurant pour la suite de l’application. Nous ne pourrons utiliser que celle-ci dans toute l’interface. Nous nous sommes mis à parcourir les polices installées sur le Mac. Nous cherchions une police qui passe aussi bien en minuscule, en majuscule et en gras.

Mais nous ne voulions pas:

1- de lettres avec des empattements:

police Baskerville

 

2- de lettres qui dépassent de la baseline:

police Bodoni 72

 

3- de lettres trop alambiquées:

police Curlz

 

4- de lettres manuscrites:

police bradley hand bold

 

5- de lettres avec un intervalle trop important:

police blair MdITC

 

6- de lettres avec une forte variation de largeur:

police Herculanum

 

Notre choix s’est donc finalement porté sur la police Avenir:

police Avenir

 

Les DIMENSIONS

Super, nous avons la forme, la couleur, la police, yapuka !

Mais on le dessine avec quelles dimensions ce bouton ?

Pour la taille, je regarde sur Xcode les dimensions actuelles du bouton (105 x 23):

Affichage des dimensions dans Xcode

 

Le premier test à cette dimension donne un résultat assez mauvais. L’image est baveuse et très pixellisée:

Résultat du bouton 105×23

 

Tous nos boutons auront donc la hauteur de : 375×70 pixels en 150 DPI et la taille de la police associée sera 24pt.

 

Le RESULTAT

Le bouton final

 

Le résultat à l’échelle, dans l’application

 

Cette fois-ci c’est bon, tous nos futurs boutons suivront ces principes de conception!

PENDANT CE TEMPS:

Cliquez ici pour lire: Hervé continue de dessiner la suite du Turbomédia.

Rendez-vous lundi prochain pour les prochaines images!