Apprendre les compétences dont vous avez besoin pour la conception ou le développement web est la première étape pour travailler sur le web – mais cela signifie aussi se familiariser avec les outils du métier. C’est pourquoi nous avons établi cette liste de 99 outils gratuits dont vous aurez besoin soit pour le développement web, soit pour la conception web, soit pour les deux.

Chaque ressource de cette liste est gratuite et complète les compétences que nous enseignons dans nos Blueprints de conception web, de développeur web et de développeur front-end (des cours dirigés par un instructeur qui vous font découvrir les principes fondamentaux de chaque rôle).

A mesure que vous apprenez, gardez cette liste à portée de main et considérez-la comme votre propre boîte à outils virtuelle.

Ressources de conception Web

Cette liste d’outils de conception Web comprend des outils de conception Web pour les débutants, ainsi que des ressources de conception qui vous serviront tout au long d’une carrière.

(retour au début)

Listes de bulletins d’information

1. Creative Market
Avant toute chose, allez vous inscrire sur la liste de bulletins d’information de Creative Market. Une fois par semaine, vous recevrez un courriel rempli de 5 téléchargements gratuits, comprenant tout, des motifs et des polices de caractères aux modèles et aux thèmes.

(retour au début)

Les logiciels et les applications

Ces logiciels et ces applications web fournissent une base solide pour la conception web.

2. CoffeeCup Software
Ils offrent toutes sortes d’applications gratuites pour les concepteurs de sites Web, notamment un éditeur HTML, un constructeur de formulaires Web, un concepteur de panier d’achat, et bien d’autres.

3. App InVision
Puissants outils de prototypage et de collaboration. Vous pouvez obtenir des maquettes et des prototypes haute-fidélité en quelques minutes.

4. Pixlr
Modifiez des images directement dans votre navigateur.

5. Canva
Un logiciel de conception graphique étonnamment facile que tout le monde peut utiliser. La fonction de recherche et de glissement est si simple et utile !

6. Easel.ly
Modèles d’infographie gratuits géniaux.

(retour au début)

Photos

Les photos sont une partie essentielle de la conception Web. Ces ressources de photos de stock sont des go-to clés lorsque vous avez besoin de la bonne photo en ce moment.

7. Unsplash
Certaines des plus belles photos de stock gratuites là-bas, et avec des tonnes de variété. De nouvelles images sont ajoutées tous les jours.

8. PicJumbo
Bénéficiez de photos gratuites livrées dans votre boîte aux lettres et totalement libres pour un usage personnel et commercial.

9. Gratisography
Des images gratuites en haute résolution que vous pouvez utiliser dans des projets personnels et commerciaux. Elles ont des catégories faciles à parcourir : animaux, nature, objets, fantaisistes, et plus encore.

10. Compfight
Recherchez des tonnes d’images sous licence pour une utilisation personnelle et/ou commerciale, la plupart provenant de Flickr.

11. IM Free
Ressources de conception web classées, y compris une tonne de photos catégorisées, plus des icônes et des modèles.

12. Stock Up
Recherche de plus de 9 000 photos provenant de 26 sites web différents, le tout en un seul endroit.

13. Death to the Stock Photo
S’inscrire sur leur liste de courriel et recevoir leurs packs de photos gratuites dans votre boîte de réception une fois par mois.

14. Little Visuals
Si vous vous inscrivez sur leur liste, vous recevrez 7 photos gratuites en haute résolution par courriel une fois par semaine.

15. New Old Stock
Obtenez gratuitement des photos anciennes provenant d’archives publiques.

16. Cupcake
Des photos gratuites et en haute résolution par Jonas Nilsson Lee.

17. Pexels
10 nouvelles photos d’archives gratuites chaque jour.

18. Magdeleine
1 photo haute résolution gratuite par jour.

19. SplitShire
Des photos d’archives gratuites et de haute qualité par un photographe italien.

20. ISO Republic
Des photos de stock de haute qualité commercialisées auprès des créatifs.

21. Paul Jarvis
S’inscrire pour obtenir gratuitement 20 des meilleures photos de Paul Jarvis.

(back to top)

Symboles + Icônes

Vous cherchez des symboles ou des icônes à utiliser sur votre site web ? Ne cherchez pas plus loin.

22. Pixeden
Des tonnes de jeux d’icônes gratuits, y compris des icônes météo, des icônes sociales, des icônes de ligne, et bien d’autres.

23. Iconmonstr
Plus de 2800 icônes au graphisme audacieux dans quelques styles différents.

24. Captain Icon
Plus de 350 icônes vectorielles gratuites pour les designs mobiles et web.

25. Linear Icons
Une police d’icônes avec 170 icônes différentes à choisir.

26. Font Awesome
Une police de symboles qui vous permet d’ajouter des symboles à vos sites web.

27. Fontello
Génère des packs de polices d’icônes.

28. flaticon
Télécharger des icônes vectorielles ou inclure des icônes comme polices de caractères web.

29. The Noun Project
Recherchez un nom, obtenez un symbole ou une icône gratuite.

30. Endless Icons
Bibliothèque d’icônes gratuites.

31. Perfect Icons
Personnalisez et optimisez les icônes de médias sociaux pour votre site.

32. iconSweets
60 icônes Photoshop vectorielles gratuites.

33. Icônes rondes
Plots gratuits d’icônes excentriques et professionnelles.

(retour en haut de page)

Polices

Les polices de caractères sont une partie si cruciale du design qu’il peut être facile de les négliger. Regardez plutôt ici, et trouvez les polices qui feront passer votre conception au niveau supérieur.

34. Google Webfonts
Ajouter des polices à votre site web en quelques clics.

35. typegenius
Générateur d’appariement de polices.

36. Font Squirrel
Des centaines de polices totalement gratuites.

37. Beautiful Web Type
Voyez une collection conservée des plus belles polices de caractères Google Webfonts.

38. Lost Type
De superbes polices payantes.

(retour en haut de page)

Couleurs

Vous avez besoin d’aide pour composer les meilleures couleurs pour votre design ? Ces outils de couleurs sont à votre service.

39. Material UI
Une galerie de couleurs Material Design et flat design à utiliser dans vos designs.

40. Paletton
Débutez avec n’importe quelle couleur et obtenez une palette (avec 5 nuances par couleur) basée sur quelques modèles de schéma de couleurs différents : monochromatique, adjacent, triade, tétrade ou personnalisé.

41. Design Seeds
Des tonnes de superbes palettes de couleurs tirées de photographies. Vous pouvez effectuer une recherche par mot-clé ou pour des couleurs similaires.

42. Adobe Color Wheel
Choisissez parmi différents types d’associations de couleurs et enregistrez vos palettes de couleurs.

43. Palette matérielle
Générez une palette de couleurs basée sur 2 couleurs.

44. Flat UI Color Picker
Le nom dit tout.

45. Flat UI Colors
Ditto.

46. Bootflat
Cueilleur de couleurs plat.

47. Coolors
Générateur de palette de couleurs.

48. Skala Color
Téléchargement gratuit de sélecteur de couleurs.

49. BrandColors
Consulte les couleurs exactes que les grandes marques utilisent.

50. 0 à 255
Trouvez la variation de couleur parfaite que vous recherchez.

51. Amateurs de couleurs
Parcourez les palettes de couleurs des utilisateurs et ajoutez les vôtres à la communauté.

52. Palette pour Chrome
Génère des palettes de couleurs à partir d’images.

(retour au début)

Fonds d’écran + textures

Les photos, les polices et les couleurs ne sont pas la fin d’un design – vous avez également besoin de fonds d’écran et de textures pour tenir le tout ensemble. Trouvez les vôtres avec ces outils.

53. Pattern8
Des tonnes de motifs répétitifs funky, audacieux et lumineux parmi lesquels choisir.

54. Repeat-X Repeat-Y
Des motifs répétitifs étonnants du monde entier.

55. Texture King
Toutes les textures que vous pouvez désirer : grunge, rouille, plâtre, béton, saleté, et bien d’autres encore.

56. Patternico
Créez vos propres motifs en utilisant des icônes Font Awesome. Personnalisez la couleur de fond, la taille de la toile et la transparence des formes.

57. Motifs subtils
Motifs téléchargeables gratuitement.

58. Lost and Taken
Des textures gratuites dans une tonne de catégories, y compris le carton, la pierre, le métal, les bulles, le sans couture, et plus encore.

59. BG Patterns
Créer des motifs sans couture avec des couleurs, des formes et plus personnalisables.

(back to top)

UI (User Interface) Kits/Guides

Le design web est plus qu’un simple attrait visuel. La façon dont l’interface utilisateur d’un site  » se sent  » pour l’utilisateur est également un facteur critique. Ces outils vous aideront à vous assurer que votre propre conception de l’interface utilisateur est au point.

60. 55+ Elements Free UI Kit
Un kit d’interface utilisateur propre et moderne. N’oubliez pas de faire des recherches sur le site Behance pour trouver des tonnes d’excellentes ressources provenant d’autres designers !

61. Oh non, pas un autre kit d’interface utilisateur
Un kit d’interface utilisateur mobile et web simple, plat et open source qui est livré sous forme de fichier PSD.

62. PSD Booster Freebies
Des tonnes de grands freebies Photoshop, y compris des kits UI, des thèmes et plus encore.

63. Material Design Guidelines
Le guide officiel des normes Material Design de Google.

(retour en haut de page)

Ressources de développement Web

Après la conception d’un site Web, il faut le développer ! Que vous travailliez sur les deux côtés du processus (conception ET construction d’un site), ou que vous construisiez un site basé sur les conceptions de quelqu’un d’autre, ces outils de développement vous aideront à faire de cette conception une réalité virtuelle.

(retour au début)

Moteurs de recherche de noms de domaine

Les noms de domaine sont au cœur d’un site Web – ils sont l’adresse directe où les utilisateurs peuvent trouver votre site en ligne. Mais l’internet est un endroit bondé, et il peut être difficile de trouver le nom de domaine exact que vous voulez. Ces outils vous aideront à savoir si le nom que vous voulez est disponible, et à en créer un qui l’est si votre premier choix ne l’est pas.

64. Namemesh
Un puissant moteur de recherche de noms de domaine qui vous aide à trouver des domaines qui sont courts, amusants, communs, similaires et divers autres qualificatifs.

65. Nameboy
Entrez un ou deux mots clés et obtenez une liste de domaines disponibles qui les incorporent.

66. Panabee
Décrivez ce que vous voulez en deux mots et Panabee générera une liste de noms de domaine potentiels.

67. Impossibilité
Génère des noms de domaine aléatoires à partir d’un seul mot.

68. LeanDomainSearch
Recherche d’un nom de domaine par mot-clé.

(retour en haut de page)

Frameworks, Templates, Code Packs, + Themes

Parfois vous aurez besoin de coder chaque partie d’un site web à partir de zéro-mais parfois vous ne le ferez pas. Voici une liste de cadres, de modèles, de packs de code et de thèmes que vous pouvez utiliser pour réduire le levage lourd.

69. WP-Flex
Un boilerplate de thème WordPress vierge et responsive qui suit les meilleures pratiques et exigences du Codex officiel de WordPress.

70. Foundation
Un framework responsive avancé qui est l’un des plus populaires sur le marché.

71. Ionic
Créer des applications mobiles en utilisant les technologies web que vous connaissez et aimez.

72. Initializr
Générez rapidement un modèle basé sur HTML5 Boilerplate.

73. Materialize
Un framework moderne et réactif basé sur les spécifications Material Design de Google.

74. WordPress Plugin Boilerplate
Si vous voulez créer des plugins WordPress, le Plugin Boilerplate est un point de départ standardisé et orienté objet.

75. Front-end Boilerplate
Un point de départ de base pour la création de vos sites Web afin que vous n’ayez pas à tout recréer de zéro à chaque fois.

76. HTML5 Boilerplate
Le premier et le meilleur. Code HTML5 boilerplate gratuit.

77. HTML5 UP
Modèle HTML5 gratuit entièrement responsive.

78. 1 Line CSS Grid Framework
Un framework pour CSS qui ne fait qu’une ligne !

79. 960 Grid System
Un favori de Skillcrush.

80. Starkers pour WordPress
Un modèle de base pour développer votre premier thème WordPress.

81. Barebones pour WordPress
Modèle WordPress gratuit pour les développeurs.

82. Underscores
Modèle WordPress pour la construction d’un tout nouveau thème.

83. Sage pour WordPress
Un thème WordPress de démarrage basé sur le boilerplate HTML5 et Bootstrap.

84. Whiteboard pour WordPress
Un thème WordPress propre et basique pour les développeurs.

85. Bootstrap
Un framework HTML, CSS et JS responsive.

86. Bootswatch
Thèmes gratuits pour Bootstrap.

(retour au début)

Guides de style de codage

Vous ne pouvez pas commencer à coder sans apprendre les compétences de base, mais une fois que vous avez ces compétences clouées, il est temps d’apprendre à coder avec art. Ces guides vous enseigneront les meilleures pratiques de codage qui élèveront votre travail au-delà du niveau de base.

87. Web Field Manual
Une collection de ressources, de meilleures pratiques, d’inspiration et de matériaux de référence pour le codage moderne. Il y a aussi des sections remplies d’outils et de ressources supplémentaires et d’informations spécifiques au langage.

88. Google Developers Web Fundamentals
Une ressource complète pour les meilleures pratiques de développement web, directement de Google. Parfait pour les nouveaux développeurs et ceux qui veulent améliorer leurs projets.

89. Déploiements Meilleures pratiques
Avant de déployer un site Web ou une application, assurez-vous de consulter ces meilleures pratiques pour vous assurer que tout se passe bien.

90. GitHub
Le guide de style de code très personnel de GitHub.

91. Google
Le guide de style de code de Google.

92. Mozilla
Un guide de style de code des pros de Mozilla.

(retour au début)

Validation du code

Fini avec ce site web ? Pas si vite. Avant de marquer ce projet  » terminé « , utilisez ces outils pour boucler les extrémités libres de votre code et vérifier si vous respectez les normes d’accessibilité, de style et les meilleures pratiques de l’industrie.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(back to top)

Prêt à combiner ces outils avec les compétences dont vous avez besoin pour gagner de l’argent dans la technologie ? Consultez notre page de programmes pour trouver le cours Skillcrush Blueprint qui vous convient. En seulement trois mois, vous pouvez être qualifié pour commencer à travailler sur le web.