Personnalisation : Quelques bases de design

Sujets dédiés à l'usage des outils de personnalisation (ex ZOOPER, UCCW, les Launchers)
#1

Personnalisation : Quelques bases de design

Messagepar edem84 » 24 Mars 2014, 14:36

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 :)
Avatar de l’utilisateur
edem84
Ancien du Staff
Ancien du Staff
 
Message(s) : 4214
Inscription : 07 Sep 2010, 23:47
Localisation : Maroc

#2

Re: Personnalisation : Quelques bases de design

Messagepar Isi_77 » 24 Mars 2014, 14:58

Merci de partager ton art avec nous, @edem84. ;)
Samsung Galaxy S7 SM-G930FImageRom : Stock G930FXXU2ERD6ImageImage
Forfait RED Ed. Limitée 50 Go ImageAndroid : 8.0 ImageCSC : FTM
µSD SanDisk 64 Go cl.10ImageAucun dépannage en MP - MerciImageet au fond du tiroir un S1, un S2, un Note2 et un S5, tous fonctionnels :geek:
Ne pas oublier de passer par la section Présentation et de remplir une signatureImageLiens utiles : Pilotes Samsung 1.5.27 - Odin 1.85
Avatar de l’utilisateur
Isi_77
Administrateur
Administrateur
 
Message(s) : 8206
Inscription : 19 Août 2011, 08:19
Localisation : Hérault

#3

Re: Re : Personnalisation : Quelques bases de design

Messagepar jhowlett468 » 24 Mars 2014, 15:00

:o sacré boulot m'sieur... Je vais creuser à propos de tout çà : je me suis toujours fait des homes fonctionnels avec tout ce qui va bien sous la main à portée de main ou pas loin mais qd je vois ce que tu fais je me dit qu'on peut avoir un home fonctionnel et... Qui a aussi de la gueule ;)
Les interrupteurs 3G et wifi c'est quoi stp ?
With my precious I9305
Huawei P8 Lite 2017 (PRA-LX1) | ROM PRA-LX1C109B120 full stock (ROM Orange)
Gear Fit (SM-R350) | ROM BOA2

Liens importants | Nouveau ?
Drivers 1.5.51 -> Install
Vérifiez votre modèle (modèles plus récents) | Téléphone qui bootloope ? | En ULTIME recours ? ---> ICI
Mon Discord The Division : ICI
Ex-rédac chef du Blog
Avatar de l’utilisateur
jhowlett468
Ancien du Staff
Ancien du Staff
 
Message(s) : 9348
Inscription : 16 Août 2011, 19:28

#4

Re: Personnalisation : Quelques bases de design

Messagepar edem84 » 24 Mars 2014, 15:06

Merci !
Les interrupteurs sont des images qui interagissent avec l'état du réseau : wifi ou 3G
Avatar de l’utilisateur
edem84
Ancien du Staff
Ancien du Staff
 
Message(s) : 4214
Inscription : 07 Sep 2010, 23:47
Localisation : Maroc

#5

Re: Personnalisation : Quelques bases de design

Messagepar franck_29 » 24 Mars 2014, 15:18

C'est un superbe topic, avec des règles simples, en tout cas exprimées de façon simple et compréhensible... C'est exactement ce qui me manquait, parceque le ressenti c'est super mais quand on connaît quelques règles de base c'est quand même mieux. En tout cas, c'est un bon moyen pour se lancer, sans de suite buter sur des choix malencontreux.
C'est de nature à ce que les nombreuses personnes tentées par la personnalisation sa lancent... c'est de nature à les rendre plus sûre d'elles même.
Parfois, il suffit de peu.

Grand Merci Eric.
Pour bien débuter sur le forum : la charte, FAQ, Comment faire ?
Les points essentiels en quelques clics : Notre Blog
Modèle Galaxy S (GT-I9000) | Galaxy S II (GT-I9100) | Galaxy Note II (GT-N7100) | Galaxy Note 3 (SM-N9005)
Firmware CyanogenMod 10.2 | Stock XWLSD | Stock N7100XXUFNE1 | stock XXUDMK2
Modifications ROOT
Réseau B&You
Mon péché mignon développement de l'appli NokyART
Avatar de l’utilisateur
franck_29
Ancien du Staff
Ancien du Staff
 
Message(s) : 9030
Inscription : 20 Juil 2010, 14:31
Localisation : France, Paris, Cléder

#6

Re: Personnalisation : Quelques bases de design

Messagepar titofe » 24 Mars 2014, 18:40

Merci edem84 pour ce tutoriel.

Je vais peut être enfin finir par faire un Home qui me convient. À chaque fois que je me lance, sa part dans tout les sens et à la fin ça fini par un Home noir et deux trois raccourci indispensable. En résumé, rien de fonctionnel et moche à souhait.

Je n'avais pas pensé à faire un croquis avant, cela devrait m'éviter de craquer trop top et de bien prendre mon temps.

"Envoyé depuis mon Nexus 5 avec Tapatalk"
Vous êtes nouveau sur le forum ? Alors n'oubliez pas de vous présenter et de remplir une signature.
Pour bien débuter sur le forum


Nexus 7 LTE (2013) 32GB6.0.1CM13 NightlyRootRecovery TWRP 3.0.2-0
Nexus 57.1.2LineageOS 14.1No RootRecovery TWRP 3.2.1-0
LG G6 H8707.0Fulmics 2.1MagiskRecovery TWRP 3.2.1-0
Avatar de l’utilisateur
titofe
Modérateur
Modérateur
 
Message(s) : 6497
Inscription : 07 Oct 2011, 05:51
Localisation : Île-de-France

#7

Re: Personnalisation : Quelques bases de design

Messagepar DuD » 24 Mars 2014, 18:46

Merci,super travail Éric [WINKING FACE]

Envoyé depuis mon Atari 520 ST ;-)
Galaxy Note EDGE ;-)
SM-N915FY
ANDROID 5.1.1 LOLLIPOP
N915FXXU1COI1
Version Kernel 3.10.40-5674927
KNOX : 0X0
-------------------------
-------------------------
-------------------------
Avatar de l’utilisateur
DuD
Ancien du Staff
Ancien du Staff
 
Message(s) : 1657
Inscription : 04 Oct 2013, 10:40

#8

Re: Personnalisation : Quelques bases de design

Messagepar gabs » 24 Mars 2014, 20:46

Un sujet très intéressant et qui pourra effectivement aider les personnes comme moi ;)
Grand merci. :)
Nouveau sur le forum ? -----> Pour bien débuter sur le forum

Modèle : Galaxy S8 (SM-G950F)
Firmware : G950FXXU1AQK7 (7.0)
Forfait : Sosh mobile + Livebox
Avatar de l’utilisateur
gabs
Ancien du Staff
Ancien du Staff
 
Message(s) : 5647
Inscription : 21 Oct 2010, 21:00
Localisation : Limoges

#9

Re: Personnalisation : Quelques bases de design

Messagepar stahw » 25 Mars 2014, 00:30

Génial !!! Du grand Edem :)
Merciiiii
Samsung Note 2 N7100, Firmware XXDMF1,
Samsung GS Cyanogen 10.2
Opérateur : Orange
Forfait : Open up tout illimité
stahw
Andro-bavard
 
Message(s) : 527
Inscription : 27 Août 2010, 18:38
Localisation : toulouse

#10

Re: Personnalisation : Quelques bases de design

Messagepar Spirit.of.Resistance » 25 Mars 2014, 00:48

Comme d'habitude, sans tâche..;)

Envoyé depuis mon GT-I9505 avec Tapatalk
Image
INFO:Pour bien débuter sur le forum-ici-
Avatar de l’utilisateur
Spirit.of.Resistance
Ancien du Staff
Ancien du Staff
 
Message(s) : 5565
Inscription : 14 Sep 2011, 13:53

Suivant

Retour vers [Perso] Tutoriels / Astuces sur les outils de personnalisation

Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 1 invité