Skip to main content

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

ressources icones gratuires icone8

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

Moveicon.com icones animées gratuites

Les icônes animées font leur retour sur le Web ! Mais rien à voir avec les vieux GIF totalembanane38ent 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

Où trouver des ressources idéos gratuites(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

Meilleure ressources photos libre 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 outil de conception graphique webdesign

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

Fotojet création de collage de photo gratuit en ligne

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

Trouver palette de couleur harmonieuse avec design seedsParcourez 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

Création de palette avec color scheme designer

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

Outil en ligne tester site responsive moble friendly

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

resizer outil google designer web

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

magic mockup screenshot environnement réel

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

Guide taille des images 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

conseil web design site pro

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

Meilleures ressources web design 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 code ressources gratuites pour webdesigner

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.

 

Youcef Kébaïli

Consultant en référencement, chef de projet Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Avec ce blog, ma mission est d'aider les entrepreneurs, qui ne sont pas spécialistes du web, à réussir leur propre site, et qu'il soit surtout visible !

6 commentaires

  • Marie dit :

    Merci pour vos conseils toujours très judicieux et d’une graaaaaaande aide !

  • Youcef dit :

    Salut Youcef,
    C’est un excellent article qui contient des information très utiles.
    Un grand bravo pour ce travail.
    A bientôt,
    Youcef

  • Amélie dit :

    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.

  • Emeline dit :

    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

Laissez un commentaire