Lorsque l’on est développeur, il est assez rare que l’on ai aussi une fibre artistique. Et même lorsque c’est le cas, ça n’est pas forcément sur ces tâches là que l’on aime passer le plus de temps.
Voici donc une liste d’outils que je peux utiliser plus ou moins souvent dans mon quotidien. De la création de favicons aux arrières plans dégradés, en passant par des générateurs de template Bootstrap, découvrez 5 outils gratuits qui me servent à réaliser des sites internets au design moderne et attractif sans pour autant avoir les capacités ou les connaissances d’un graphiste.
Générateur de favicon
Certains se demanderont peut-être qu’est-ce que le favicon ? C’est le petit logo représentant votre site qui va apparaître à côté du nom de votre meta-title dans les onglets de votre navigateur.
Généralement lorsque l’on conçoit un site, on met en favicon le logo de l’entreprise ou du projet que l’on est en train de développer. Cependant c’est assez rare que ce logo ai des dimensions adaptées à un favicon (carré de 16x16px ou 32x32px). Il faut donc passer par un logiciel pour le redimensionner et créer ensuite les liens au sein de notre HTML pour pouvoir l’afficher.
De mon côté j’ai découvert un générateur de favicon : realfavicongenerator.net. J’ajoute mon image, je sélectionne quelques paramètres et je télécharge un pack complet. Dans celui-ci on va récupérer notre logo redimensionné aux bonnes dimensions mais également le code HTML appelant les différentes tailles afin d’afficher la plus adaptée. Cela permet notamment d’afficher une icône d’une taille supérieure pour une personne décidant de sauvegarder notre site en tant que raccourcis sur l’écran d’accueil de leur téléphone.
Arrière-plans dégradés
Lorsque l’on pense à la création de son site internet il peut être parfois complexe de trouver un arrière plan qui soit habillé mais sans pour autant trop chargé ou à l’inverse tout blanc. De mon côté j’essai de travailler avec des arrière-plans colorés afin de donner de la vie à mes sites internets. J’ai découvert et j’utilise depuis peu le site internet gradienta.io qui permet de récupérer des arrière-plans en dégradés (et donc uniquement en CSS) plutôt bien travaillés. On peut ainsi obtenir de très beaux rendus sans avoir à charger une image complète qui se révélera lourde. Côté responsive, aucun soucis, ils le gèrent complètement !
L’intégration désintégrée
Vous êtes plutôt dév-back et l’intégration n’est pas un plaisir pour vous ? Je peux le comprendre ! Vous avez probablement déjà franchis le pas de l’utilisation d’un framework CSS afin de vous éviter un grand nombre de lignes de codes. Si c’est le cas et que vous avez choisi Bootstrap et bien cet outil va bien vous servir : bootstrap-magic. Cet outil va vous permettre au travers d’une interface de générer votre projet Bootstrap en quelques clics. Ainsi vous vous éviterez un grand nombre de lignes de CSS. Il y a un certain temps à passer pour tout configurer mais vous obtiendrez un fichier CSS propre dès le départ avec les boutons aux couleurs que vous souhaitez etc… Un bon nombre d’heures de gagner à coup sur.
Un logo en quelques clics
Vous n’avez pas de graphiste ou pas les moyens de vous en payer un ? Sachez qu’il existe de nombreux sites qui vous proposent de générer un logo parmi une banque de logos pré-existants. Pour ma part il m’est arrivée une fois d’en avoir besoin pour un court projet scolaire et j’ai utilisé l’outil namecheap qui permet de générer un logo via un nom de projet. Ainsi, en quelques clics vous pouvez obtenir un logo relativement sobre mais efficace. Cela peut se révéler très utile pour les projets à très faible budget ou pour obtenir quelque chose très rapidement et sans connaissance de logiciels tels que Illustrator ou Photoshop.
Des images placeholders
Vous êtes en train de développer un site internet pour un client mais il ne vous a pas encore fourni ses visuels ? Plutôt que d’attendre et devoir lui envoyer les dimensions de chaque photos pourquoi ne pas utiliser un site internet comme placeholder.com qui vous permet au travers d’une URL de récupérer une image aux dimensions que vous souhaitez. Par exemple pour une image en 300x250px il vous suffit d’appeler au sein de votre SRC l’URL suivante : https://via.placeholder.com/300×250.png. Cela vous générera une image comme celle-ci :
Elle a donc l’avantage d’être aux bonnes dimensions et également que ces dimensions soient visibles par votre client pour qu’il sache dans quelle taille il doit vous envoyer ses visuels.
BONUS : des images d’illustrations
Si vous avez besoin d’illustrer votre site internet avec de belles images mais qui soient tout de même libres de droits, il existe un grand nombre de sites internet proposant cela désormais. Pour ma part j’ai pour habitude d’utiliser unsplash.com sur lequel je trouve une très grande majorité de mes photos. Cependant, il arrive parfois que je ne trouve pas exactement ce que je cherche, et dans ce cas je me tourne vers d’autres sites un peu moins connus comme pexels.com que je peux vous recommander.
Tous ces outils ne sont peut être pas les meilleurs de leur catégorie, mais ils ont le mérite de faire parfaitement leur travail et d’être en plus gratuits. Ils me permettent au quotidien de travailler plus simplement et je tenais à vous les partager afin que vous puissiez en faire autant.
