Dégradé de couleurs

Ecrit par le Vendredi 29 Septembre 2017

Dégradé de couleurs
Comme vous avez dû le remarquer, le dégradé de couleurs est une tendance incontournable sur le web cette année.

Désormais, GoodBarber vous permet d'ajouter facilement des dégradés de couleurs dans votre app.

Dégradé de couleurs
Jusqu'à peu, pour appliquer un dégradé de couleurs dans un design, c'était fastidieux. Il fallait demander à un designer de produire l'image du dégradé, puis d'uploader cette image à l'endroit désiré. En plus de multiplier les étapes pour parvenir à un résultat finalement assez simple, un dégradé sous forme d'image rajoute du poids dans les pages, augmente les temps de téléchargement et la consommation de bande passante.  

Aujourd'hui, les navigateurs web sont capables de créer des dégradés de couleurs à partir des instructions contenues dans les feuilles de style (CSS3 Gradients). Il suffit d'indiquer la couleur de départ, la couleur d'arrivée et la direction. Le dégradé est créé au moment de l'affichage de la page. Il n'y a plus de téléchargement d'image. Il y a même un avantage supplémentaire : si l'on zoom dans la page, le dégradé généré par le navigateur ne sera pas pixellisé !

Générateur de dégradés

Dégradé de couleurs
La contrainte technique étant levée, le plus gros challenge qui reste est artistique. Tout le monde, moi le premier, n'a pas l'oeil pour choisir la meilleure harmonie de couleur pour son dégradé :)

C'est la raison pour laquelle nous avons développé un système permettant de choisir son dégradé dans une bibliothèque très complète (cette librairie est connectée au service https://uigradients.com). Une fois le dégradé choisi, il est généré automatiquement et appliqué au design de votre app.

Le générateur de dégradé dispose d'un filtre, vous permettant de choisir la couleur principale que vous recherchez et voir toutes les déclinaisons associées.

Ou l'appliquer ?

GoodBarber vous permet d'appliquer des dégradés de couleurs dans de nombreux endroits de votre app :
- la navBar
- les modes de navigation
- la boite de log
- les boutons
- le header et le background
- le splashscreen 
- l'icone de l'app

En fonction de l'endroit où vous appliquez votre dégradé, il peut être nécessaire de re-compiler et de soumettre une mise à jour de votre app dans les stores. Pour le savoir, une fois vos modifications effectuées, il suffit de suivre les indications de la page Publier > Versions

Certaines de nos maquettes ont été designées en utilisant le générateur de dégradés. Jetez un oeil à Blurred, Blurred V2, NightDrive, Sunset et Stardust pour voir le magnifique résultat.
Dégradé de couleurs



Entrez votre adresse email