J’ai établi cette liste d’outils, ressources web design et guides pratiques pour vous aider à réussir votre site du point de vue graphique.
Il y a quelques règles simples à respecter que tout le monde peut apprendre. Des ressources il en existe des milliers aujourd’hui, cet article est là pour faire le point et vous présenter ce que personnellement j’utilise (presque) tous les jours dans mon métier.
Vous en trouverez certainement une dont vous avez besoin !
1. Ressources graphiques
Icons8 : La plus grande bibliothèque d’icônes gratuites
Avec 18 800 références d’icônes, Icons8 est véritablement une des plus grandes bibliothèques d’icônes entièrement gratuite sur le Net.
Je m’en suis pas mal servi cette année pour quelques projets clients.
Tapez un mot-clé, personnalisez la couleur, le fond, la bordure…etc. Puis téléchargez votre icône au format PNG, c’est tout simple !
Moveicon.com : bibliothèque gratuite d’icônes animées
Les icônes animées font leur retour sur le Web ! Mais rien à voir avec les vieux GIF totalement démodés et ringards qu’on voyait il y a quelques années, et que malheureusement on croise encore de tempe en temps….
Les nouvelles icônes animées sont stylées, sobres et minimalistes. Dans l’air du temps quoi !
Trouvez des vidéos gratuites pour votre Site
(Par Arnaud STECKLE – Webdesigner Trends)
L’utilisation de la vidéo est aussi une grande tendance sur le Web depuis quelques mois, boostée par l’amélioration des performances techniques au niveau du code HTML / CSS, mais aussi au niveau des réseaux d’accès domestiques (4G, ADSL, fibre optique…)
Je ne parle pas ici des vidéos en streaming sur YouTube, il s’agit plus de mini-clips disponibles pour illustrer votre Site dans le zone d’entête (Header), en fond de page ou en introduction de certaines rubriques.
Attention à ne pas en abuser, la vidéo doit véhiculer un message qui correspond à l’image de votre marque. Suivez ce guide rédigé par Arnaud Steckle sur son blog, une référence en matière de Web design.
Ma banque d’images préférée : Unsplash
Des images de grande qualité et en haute résolution, publiée uniquement par des photographes professionnels ! J’utilise beaucoup ce service pour illustrer mes sites et ceux de mes clients.
Tapez un mot-clé pour trouvez des photos sur une thématique précise. Ou inscrivez votre adresse e-mail et recevez 10 nouvelles photos inédites tous les 10 jours dans votre boîte mail.
2. Outils de Web Design
Canva : Devenez Webdesigner à la place du Webdesigner
Canva est un outil en ligne gratuit qui vous permet de créer rapidement des éléments graphiques sans être un pro du Webdesign !
Plusieurs templates sont disponibles pour illustrer vos profils et publications sur les grands réseaux sociaux (exemple : page de couverture).
Vous pouvez aussi créer des slider, des posters, des infographies…etc. C’est top.
Fotojet : outil en ligne gratuit de création de collages photo
Réalisez différents montages/collages avec vos photos en toute simplicité. Exemples : posters, couverture de magazine, carte d’invitation…
Mais aussi pour des usages plus professionnels : bannières YouTube, post Facebook, publication instagram…etc. De nombreux design prêt à l’emploi,très créatifs.
Design Seeds : trouvez des palettes de couleurs harmonieuses
Parcourez le catalogue de palettes classées par thème, et trouvez les couleurs idéales pour votre projet.
L’outil est capable d’extraire les couleurs dominantes d’une image pour en faire une palette parfaitement harmonisée. Vous n’avez plus qu’à récupérer les codes couleur à utiliser sur votre site.
Color Scheme Designer : outil complet de création de palettes
Un outil plus complet pour vous aider à trouver des combinaisons de couleurs qui se complètent bien.
A partir d’un couleur dominantes, l’outil peut par exemple vous donner les couleurs complémentaires, en triade, en tétrade… etc. Obtenez un aperçu rapide du rendu sur une page exemple.
Piresponsive : Testez l’affichage de votre site sur Tablette et Smartphone
Coup de cœur pour cet outil français créé par la Start-up Orson (outil de création de site en ligne).
Cet outil gratuit est un véritable simulateur d’appareils mobiles pour tester en live le rendu de votre site sur iPad, iPhone, Samsung Galaxy, Nokia…etc
Resizer de Google
Il existe aussi un outil Google qui propose une vue interactive pour aider les designer à tester le rendu d’un site sur les différents support : écran de bureau, tablette et mobile.
Magic Mockups : la mise en scène de votre site
Très tendance sur le Net ! Placez un screenshot (copie d’écran) de votre site dans un environnement réel. Le résultat est bluffant !
Choisissez un environnement, téléchargez votre image et l’outil s’occupe de l’incruster dans le modèle. C’est top, j’aime beaucoup.
3. Guides et tutoriels
Infographie – Guide 2019 de la taille des images sur les réseaux sociaux
Ce guide sous la forme d’une infographie vous est indispensable si vous voulez faire la promotion de votre activité sur les réseaux sociaux. Ces canaux de communication sont aujourd’hui aussi important que le référencement naturel.
Vous devez optimiser votre visibilité sur Facebook, Twitter, Google MyBusiness, LinkedIn… etc. Cette optimisation passe avant tout par des visuels soignés et parfaitement adapté à chaque média social.
Prenez le temps de bien travailler votre image !
10 conseils designs pour un site professionnel
Un guide des points essentiels à ne pas rater lors de la création de son Site Internet. Suivez ces 10 conseils simples et bien expliqués, tout le monde peut y arriver même sans être un professionnel, à condition d’y consacrer un peu de temps et d’effort. Logique on n’a rien sans rien !
Si vous n’avez vraiment pas le temps ni l’envie de vous réaliser votre Site Web tout seul alors confiez moi votre projet, il y a toujours moyen de trouver bonne solution.
Plus de ressources web
14 Web Design Tools to familiarize with in 2016
J’ai déniché cet article, en anglais, qui présente davantage d’outils Web Design. Je ne les connais pas encore tous mais je vous laisse le lien car en général ils sont de bon conseil sur ce blog.
Wifeo : des ressources gratuites pour Webdesigners !
Wifeo est un outil français 100% gratuit pour que les internautes puissent créer leur propre site internet totalement gratuit !
Mais ce site offre également toute une palette d’outils pour simplifier la vie du Webdesigner. Ce sont des générateurs de code en ligne qui vous permettrons de faire plein de chose très facilement, comme :
- Générateur de loader CSS
- Générateur de boutons vers vos réseaux sociaux
- Générateur de menus CSS et jQuery
Et tout simplement une banque de pictos/icônes gratuites à télécharger ici.
Proposez vos ressources et outils
Cette liste n’est pas du tout figée. Si vous connaissez de bon outils pour le Web Design et autres ressources… partagez-les ici SVP, n’hésitez pas !
Le but est d’enrichir cette page et d’en faire profiter le plus grand nombre. Merci.
Merci pour vos conseils toujours très judicieux et d’une graaaaaaande aide !
🙂 Merci Marie !
Salut Youcef,
C’est un excellent article qui contient des information très utiles.
Un grand bravo pour ce travail.
A bientôt,
Youcef
Youcef, je découvre votre site, et … Merci.
Moi qui me lance dans la grande aventure de l’auto entreprise avec boutique e commerce ( bientôt j’espère) votre site est une mine d’or qui est en déjà première place dans mes favoris.
Merci pour votre travail.
Bien cordialement.
Merci bien Amélie !!
Soyez la bienvenue 🙂
Bonjour,
Je me lance moi aussi dans l’aventure de l’entrepreneuriat, et la création d’un site internet est une étape clé de nos jours. J’étais un peu perdue dans la multitude d’outils proposés sur le net. Grâce à vous, j’y vois plus clair, et j’ai hâte de commencer ! Merci beaucoup pour vos articles !
Bonne continuation