Personnalisation : Quelques bases de design

Par edem84 - Le 24/03/14 - Affichages : 6967
Loin de moi l’idée de faire un précis sur le design, ce sera plutôt un ensemble de points (non exhaustifs) sur ce que l’on doit faire lors de la conception de ses écrans avec des outils tel que Zooper par exemple.
Image

Car vous vous en doutez bien, les choix de couleurs, de photos, de typos, voire même l’emplacement des éléments est purement subjectif et dépendent essentiellement de votre ressenti ! Mélange entre subjectivité et objectivité tout en ayant en tête ce leitmotiv : “l’art de la simplicité”! On n’est pas sorti de l’auberge :)

On va donc parler de couleurs (de mariage entre les couleurs, plus précisément), de typographie (car il y a des polices qui ne sont pas agréables pour la lecture sur écran), de choix de photos pour agrémenter vos “home”.

Je le rappelle, ce “tuto” est à l’usage de personnes n’ayant aucune idée sur la question. Ils ont senti que quelque chose ne collait pas, ils ont certainement résolu la chose de manière intuitive et souhaitent mettre des mots sur le truc ;)

Première astuce :
je commence toujours à travailler mes “home” par ... un croquis sur papier !!!
Pourquoi ?
J’ai fait le bilan des éléments que je veux voir s’afficher sur mon homescreen et pour moi, la meilleure manière est de croquer l’ensemble.
Lors de ce travail, je prend aussi mon Note 3 entre les mains pour savoir quels seront les éléments interactifs que j’activerai à l’aide de mon pouce droit (je suis droitier). Les éléments accessibles avec mon pouce, sont les premiers que je “croque” sur mon schéma.
Puis je place au fur et à mesure les éléments informatifs (horloge, météo, localisation etc...).
Ayant la vue qui baisse (privilège de l’âge), je donne une taille correcte aux éléments que je souhaite voir d’un seul coup d’oeil, même sans lunettes de vue.
Ceci fait, je peux passer sur la conception avec (pour ma part) Zooper, afin de créer un widget qui prendra la place d’un écran complet (c’est mon choix).

Seconde astuce :
Là, j’ai deux façons de travailler :
1 - soit je pars d’une belle photo qui me servira de base et à partir de laquelle je déterminerai les couleurs complémentaires pour les autres éléments
2 - soit je pars sur une base de couleur et ses complémentaires et je choisirai la photo en fonction de celles-ci

Dans les deux cas, il faudra absolument arriver à une harmonie des couleurs. La seule façon de ne pas se tromper est de jouer avec les couleurs complémentaires et les tons de celles-ci.

Comment savoir si la couleur choisie est belle ?
Elle doit faire corps avec l’ensemble, elle doit vous convaincre que ça ne pouvait pas être une autre ;) Facile!!

Quel outil utiliser pour choisir les couleurs complémentaires (couleurs qui se marient ensemble) ?
J’ai longtemps chercher une application Android pour ce faire et je me suis tourné sur un site internet que je garde en favori : Adobe Kuler

Il est tout simplement excellent! Vous pouvez même glisser une photo pour qu’il l’analyse et vous sort une palette complète.

Pour visualiser les couleurs complémentaires, cliquez sur le menu déroulant “Color Rule” et choisissez : “Complementary”.
Image
Pour choisir la couleur dominante je vais glisser (sur cette roue), une des deux poignées vers les bleus et automatiquement, j’aurai en vis à vis la couleur complémentaire (ici les oranges).
En glissant les points sur chaque poignée, vous ferez apparaître les dérivés de chaque dominante.

En cliquant sur un des points (sur les poignées), vous sélectionnerez la case de la couleur avec les caractéristiques (CMYK, RGB, LAB, HSB et celle qui nous intéresse pour Zooper ou autre : HEX).
Notez la valeur pour la coller dans Zooper. Nota, il vous faudra rajouter le signe “#” avant celle-ci, ainsi que “FF” qui indiquera une opacité à 100%.
Exemple de valeur correcte pour Zooper : #FF399ECE (qui correspond à mon bleu sur l’image en tête de ce tuto).
Cherchez et prenez note de toutes les valeurs des couleurs complémentaires et dominantes en vous servant du site d’Adobe Kuler, vous en aurez besoin.

Vous remarquerez que dans mon étude de cas (image en début de topic) que j’ai volontairement introduit une couleur non complémentaire au bleu, c’est le rouge de l’heure et le switch de validation de la connexion wifi.
La raison : la couleur rouge est la première couleur sur laquelle l’homme se focalise. C’est dans nos gênes!!! Une preuve : regarder les kiosques sur lesquels sont disposés les magazines et trouvez moi une seule édition qui n’a pas une pointe de rouge sur la couverture!!
Dans mon cas, l’information primordiale est l’heure, écrite aussi grosse et en rouge, je ne peux la manquer au premier coup d’oeil :)

J’ai introduit aussi des couleurs “neutres” : noir (#212018), blanc (#F7F3F7) et une dérive, le bleu pâle (#D1D9E0).
Celles-ci colleront bien avec la photo que j’ai choisi.

Passons maintenant à une deuxième règle, qui concerne la typographie, enfin plutôt le choix de la police pour une lecture à l’écran.
Certaines études avançent que les polices sans-serif sont plus adaptées à la lecture à l'écran. Au-delà de cette consigne, il est préférable de choisir une police de caractère qui a été conçue pour la lecture à l'écran. Ce genre de police existe aussi bien avec serif que sans serif.

Une police avec serif a des empattements au bout des caractères, et une police sans serif n'en a pas.
Image
Sur l'image ci-dessous, vous pouvez voir trois styles de police qui ont leur destination privilégiée :
Image
Georgia est une police serif conçue pour l'écran, alors que Times est une police serif conçue pour l'imprimé. Verdana est une police sans serif conçue pour la lecture à l'écran.

Ma préférence va aux polices sans serif dans lesquelles ont trouve : verdana, roboto, droid etc...
Une liste non-exhaustive de référence

Ensuite vient le choix de la taille dont vous serez seul juge, le but étant que votre “home” soit bien aéré, que vous n’ayant pas de peine à repérer un élément parmi une foultitude d’autres.

Le choix des icônes est important en matière d’harmonie. La règle principale est relativement simple : ne multipliez pas les genres et collez à vos couleurs complémentaires!!

Dans le Play Store, il y a une ribambelle de pack d’icônes, choisissez en un et n’utilisez que celui-ci, ou, si vous ne trouvez pas toutes les icônes dans le même pack, installez en un autre qui soit aussi rapprochant que possible du premier!!


Conclusion : ces règles, sont MES règles. Je n’ai pas la prétention d’avoir la science infuse, surtout pas dans un domaine aussi subjectif que celui-ci. J’ai seulement voulu dégrossir des points sur lesquels butaient certains.
Prenez ces règles comme des conseils et appliquez les si vous voulez :)
17 réponse(s) -