Collection d’outils et de ressources de conception Web gratuits. Le design est facile si vous le faites intelligemment!

Peut-il y avoir trop d'outils gratuits pour accélérer / rationaliser votre processus de conception Web ? Bien sûr, il n'y en a pas, car de nouvelles technologies de pointe apparaissent chaque jour. Chaque jour, les développeurs Web trouvent quelque chose d’intéressant et de nouveau. Mais il faut du temps pour rechercher le contenu pertinent sur le net.

Économisez votre temps et votre énergie pour la création. Monster Post est là pour étancher votre soif de connaissances. L’auteur de cet article a déjà découvert 137 outils de développement Web gratuits et des ressources de conception par lesquels les concepteurs et développeurs Web enthousiastes pourraient être intéressés. Je parie que certains outils gratuits de conception de sites Web simplifieront vraiment votre processus de travail. Certains des meilleurs outils de développement Web vous surprendront et d’autres vous tiendront au courant.

Tous les outils, articles, tutoriels, plug-ins, conseils et astuces présentés dans cet article ne vous coûteront pas un centime. Notre équipe s’efforce d’économiser votre argent, elle collecte donc des trucs gratuits dès le premier tour (s’il convient, bien sûr, de faire l’objet d’une attention particulière). Si certains outils ne sont pas totalement gratuits, leur période d’essai est gratuite. Pendant ce temps, vous pourrez le déchirer et le porter comme bon vous semble ou comprendre si cela en vaut vraiment la peine. Certains des produits ont des forfaits gratuits et payants, qui permettent également de se familiariser avec l'innovation sans sortir le portefeuille de la poche de hanche de votre jean.

Ce résumé comprend les sections suivantes :

• Outils pour conception Web
• Quelques freebies pour Sketch & Mac
• UI/UX + lecture utile
• Outils pour codage et développement Web
• Lecture pour développeurs Web
• CSS
• JavaScript
• ES6
• Plugins
• Jouer et apprendre le codage

Cliquez simplement sur le lien qui vous intéresse le plus pour ignorer le reste des éléments de la liste si vous n'avez pas le temps de les parcourir tous ou si les informations ne couvrent pas votre domaine de travail particulier.

• • Macaw - Un outil de conception de sites Web qui permet d'arrêter d'écrire du code et de commencer à le dessiner. Macaw offre la même flexibilité que votre éditeur d'images préféré mais écrit également du HTML sémantique et des CSS remarquablement succincts.
  • Gravit - Gravit est un outil de conception professionnel basé sur le Web pour les concepteurs et les mondains. Avec son aide, vous pouvez facilement créer de superbes logos, cartes de visite, sites Web, dépliants et couvertures de médias sociaux.
  • Lucidpress - Permet de créer et de partager des contenus visuels époustouflants : brochures, prospectus, bulletins d'information, rapports, publications numériques, dépliants en ligne, magazines numériques, etc. Il élimine la courbe d'apprentissage des logiciels de mise en page et de conception traditionnels, afin que les concepteurs nouveaux et expérimentés se sentent comme chez eux.
  • Sparkle - Outil de dessin vectoriel vous offrant des possibilités infinies d'expression. Sparkle ne vous enferme pas dans des modèles rigides, la mise en forme est libre. L'outil est payé, mais a une version d'essai gratuite.
  • LogoGala - Les concepteurs peuvent soumettre leurs œuvres pour examen dans la galerie ou simplement parcourir la galerie pour trouver l'inspiration.

• • Fabricator - Organisez votre système de conception comme vous le souhaitez. Générez un guide de style à partir de votre code de boîte à outils. Ecrivez de la documentation en balisage pour faciliter l'utilisation de votre toolkit par les autres développeurs. Prototype rapidement.
  • Uilang - Uilang est utile pour créer des composants d'interface utilisateur personnalisés, en ajoutant une certaine interactivité à votre site, en créant des prototypes, etc. Aucune expérience de programmation n'est requise.
  • Anijs - Une bibliothèque pour améliorer vos compétences en conception Web sans codage. Offre une meilleure intégration entre les codeurs et les concepteurs, est facile à utiliser, rapide, fonctionne bien sur iPad, iPhone, Android et les navigateurs modernes.
  • ColorFavs - C'est l'endroit idéal pour créer et découvrir de nouvelles couleurs et palettes pour tous vos projets.

• Froont - Créez vous-même des pages adaptatives sans la participation d'un développeur. Chaque page créée avec FROONT est une page statique facile à créer et à charger rapidement.
• STATNUT - STATNUT est un emplacement central pour toutes vos statistiques Web. L'application est belle et colorée.
• Designfeed - En fait, il vous suffit de dire à Designfeed ce que vous voulez et il crée automatiquement un nombre infini de variantes de conception. L'outil crée automatiquement des versions parfaitement dimensionnées de votre conception pour les publier sur toutes vos plateformes sociales.
• Bonsai - Explorez les taux de freelance avec Bonsai. Il aide plus de 10 000 freelancers de haut niveau à être payés à temps. Vous obtenez 5 factures gratuites lors de votre inscription.
• The Pattern Library - La bibliothèque de motifs étonnants est un projet en cours qui respecte les modèles partagés par les designers les plus talentueux que vous pouvez utiliser librement dans vos créations. La collection de motifs et la qualité sont de qualité supérieure.
• Write a Book - Vous envisagez de partager vos connaissances dans un livre ou de concevoir un livre pour le tiers? Ce bel outil de production prend en charge le formatage et la conversion, avant même que vous ayez fini d'écrire.
• Hack - Détournez-vous avec n'importe quel outil d'édition de polices moderne et personnalisez-le selon vos besoins. Comprend des ensembles obliques réguliers, gras, obliques et gras monospaces pour couvrir tous vos besoins de mise en évidence de la syntaxe. Il fournit plus de 1500 glyphes qui incluent des jeux de caractères latins, grecs modernes et cyrilliques étendus avec amour.
• Desygner - Avec Desygner, vous pouvez éditer depuis un ordinateur, une tablette ou un téléphone, importer des images et du texte à partir de fichiers Adobe PDF, PSD et Microsoft Powerpoint. Il offre à des millions de personnes le droit d’utiliser des images publiques à glisser et déposer, des milliers d’arrière-plans, d’autocollants et de texte gratuits. Partagez en ligne ou téléchargez gratuitement un fichier PDF, JPG ou PNG.
• CMD space - Chaque concepteur a besoin d'un portfolio. L'outil se connecte à votre compte Dribbble, ce qui vous permet de créer un portfolio de conception instantanée.
• WeVideo - WeVideo est une plateforme de création vidéo collaborative basée sur un cloud. Vous n'avez pas besoin d'être un professionnel pour créer des vidéos de haute qualité. Cependant, vous contrôlez l'apparence de votre vidéo, y compris les transitions, le ralenti / accéléré, l'écran vert, etc. WeVideo permet de sauvegarder votre disque dur. Télécharger sur le cloud. Commencez sur un ordinateur et ramassez-vous là où vous l'avez laissé sur un autre.
• Semplice - Le premier système de portfolio d’études de cas entièrement adaptatif avec des fonctionnalités avancées pour les petits studios et les startups.
• Build it with Me - Build it with Me est un outil qui permet de se connecter avec des concepteurs et des développeurs aux vues similaires, unis par le même objectif: créer des applications sympas et utiles.
• Visage - Besoin de créer beaucoup de contenu visuel? Visage est un outil de conception qui simplifie la création de contenu sur la marque, contrairement au travail avec des fournisseurs lents et coûteux.
• Ezgif - Ezgif.com est un simple générateur de fichiers gif en ligne et un ensemble d'outils pour l'édition de base de gif animé. Ici, vous pouvez créer, redimensionner, recadrer, inverser, optimiser et appliquer des effets aux gifs. Vous pouvez utiliser ces outils en ligne pour presque tous les autres types d'images (JPEG, PNG, BMP, TIFF).
• Imgix - Avec imgix, vous pouvez redimensionner et traiter les images en temps réel avec de simples commandes URL. Entrez une URL imgix ou cliquez sur un exemple et le bac à sable décomposera chaque transformation d'image pour vous lorsque vous éditez et ajoutez de nouvelles opérations.

• Craft - Craft est la nouvelle référence pour les interfaces utilisateur du plug-in Sketch. Il permet une manipulation directe, un traitement WYSIWYG-like pour les données factices. Il comporte également une interface intégrée simple pour étendre les données d’échantillon en copiant et en collant des fichiers texte plats. Cliquer sur les blocs de contenu des sites Web existants pour intégrer leurs données dans votre propre conception est une autre approche pratique.
• Mobile Wireframe Kit - Mobile Wireframe Kit est un document Sketch comprenant certains des éléments d'interface utilisateur les plus utilisés dans la conception d'applications mobiles.
• Sketch Plugins - Collection de plugins pour Sketch créée par des développeurs tiers.
• Sketch Toolbox - Un simple gestionnaire de plugin pour Sketch. Il vous permet de parcourir les plugins les plus populaires disponibles pour Sketch. Téléchargez et installez de nouveaux plugins en un seul clic. Conservez automatiquement tous ces plugins à jour.
• Sketch Land - Une liste des ressources les plus utiles pour ceux qui utilisent Sketch.
• Craft - Craft est une suite de plugins pour Sketch et Photoshop qui vous permet de concevoir avec des données réelles, d'importer des données riches et de dupliquer rapidement les actifs de conception.
• Bjango - Un ensemble complet de modèles d'icônes d'application pour Photoshop, Illustrator, Sketch et Affinity Designer. Les modèles couvrent Android, iOS, OS X, Apple TV (tvOS), Apple Watch (watchOS), Windows, Windows Phone et les favicons Web. Plus une collection d'actions Photoshop, des scripts Photoshop, des règles Hazel, des workflows OS X et d'autres éléments aléatoires pour les concepteurs et les développeurs d'écran.
• Sketch Palettes - Plugin Sketch qui vous permet de sauvegarder et de charger des couleurs dans le sélecteur de couleurs.
• Marvel - Marvel est un plugin pour Sketch pour la création de prototypes mobiles et Web.
• Cognitom - Un ensemble de modèles pour créer une police de symbole ou une police d’icône avec Sketch.

Outils pour Mac uniquement

• RapidWeaver - Concevez, créez et publiez votre propre site Web en utilisant ce superbe outil pour Mac.
• Cactus for MAC - Un générateur de site statique rapide et simple utilisant la meilleure technologie de conception Web dans une solution élégante.
• iOS 9 GUI - Ce kit vous permet d'analyser les éléments d'interface utilisateur pour iOS 9 dans un format vectoriel de 100%. Utilisez-le pour étudier, présenter et concevoir de superbes applications.

Outils UI/UX 

• UI - Une inspiration quotidienne recueillie dans les archives de l'interface utilisateur et au-delà. Plus de 2200 designs brisés à 117 catégories.
• Heat Map - Vous aidera à comprendre quels éléments des pages Web reçoivent plus ou moins d’attention. Le résultat est généralement disponible en moins de 20 secondes. Pas besoin d'insérer des codes ou des scripts spéciaux. L'algorithme est basé sur des recherches scientifiques.
• Usability Square - C'est l'endroit où les passionnés de la convivialité se rassemblent pour tester leurs idées et leurs produits et vous avez la possibilité d'obtenir des commentaires impartiaux de personnes réelles. Les cartes thermiques sont disponibles instantanément.
• Marvel - Transformez les conceptions et les esquisses en prototypes iOS en les faisant glisser et en les déposant dans Marvel, envoyez votre prototype aux utilisateurs et commencez les tests. Voir exactement ce qui s'est passé à chaque point de votre prototype, puis partager les résultats avec votre équipe.

Lecture UI/UX (en anglais)

• URX - Nate Hindman explique comment ajouter un bouton "Acheter" à votre application sans coder avec URX.
• Chinese Mobile UI Trends - Tendances de l'interface utilisateur mobile chinoise - un article de Dan Grover.
• Animation Principles - Cinq principes pour une animation efficace dans UX par Linn Vizard.
• UX Design Steps - Un design UX en 14 étapes simples par Alan Cooper.
• Using Micro-interactions - Méthodes d'utilisation des micro-interactions sur votre site par Stephen Moyers.
• Mind Control in Web Design - 9 façons d'utiliser le contrôle mental dans la conception Web dans une infographie simple.
• Prototyping Tips - Rendre le prototypage moins douloureux avec ces conseils de Charles Costa.
• Content Wireframes for Responsive Design - Création de wireframes de contenu pour un design réactif - tutoriel par Tom Green.

• Im Creator - C'est plus qu'un constructeur de site Web typique. Ici, vous utilisez des bandes et des polydoms prêts à l'emploi pour la création. Vous n'avez pas besoin de coder et les résultats sont entièrement réactifs et Google friendly. Il est également livré avec le commerce électronique et les blogs.
• StackHive - StackHive vous permet de concevoir des sites Web réactifs et pixelisés via une interface de glisser-déposer et génère automatiquement du code de qualité de production HTML, CSS et JS. Fournit des panneaux de style et d'animation complets pour contrôler tous les aspects de votre conception et de vos interactions.
• RAML - Avec RAML, vous voyez à quoi ressemble votre API lorsque vous la concevez en texte brut simple à lire. Vous n'avez pas besoin d'écrire une seule ligne de code. Vous pouvez non seulement perfectionner la conception de votre API, mais également créer un modèle entièrement fonctionnel pour que les clients, les partenaires et vos ingénieurs internes puissent examiner et créer.
• Design Research Techniques - Ceci est un référentiel en ligne pour les techniques de conception participative. Ces techniques permettent de faire évoluer le cycle de vie d'un projet grâce à la participation de multiples parties prenantes, notamment des utilisateurs ou des publics potentiels, des partenaires ou des équipes internes.
• Surreal CMS - Surreal CMS se connecte à votre site Web via FTP, SFTP ou Amazon S3 pour apporter des modifications. Vous n'aurez plus jamais à vous soucier des mises à jour. Vos clients ne pourront modifier le contenu que dans les éléments spécifiés. Toutes les modifications sont suivies afin que vous puissiez voir ce que font vos clients et même revenir aux versions précédentes si nécessaire. Essai gratuit de 14 jours disponible.
• Brackets - Un éditeur de texte open source pour les concepteurs Web d'Adobe écrit en JavaScript, HTML et CSS.
• Web Designer - Créez des conceptions interactives basées sur HTML5 et des graphiques animés qui peuvent s'exécuter sur n'importe quel périphérique. Ceci est une suite de conception complète qui vous permet de donner vie à toute vision. L'outil prend en charge HTML5 et CSS3 pour que vous puissiez vous concentrer sur la création de superbes expériences visuelles.
• Responsive Web Design Tester - Testez votre conception sur tous les appareils, prévisualisez rapidement vos conceptions de site Web réactives aux dimensions qui seront affichées sur les gadgets mobiles populaires.
• Browser Shots - Browsershots effectue des captures d'écran de votre conception Web dans différents systèmes d'exploitation et navigateurs. De cette façon, vous pouvez tester la compatibilité du navigateur de votre site Web au même endroit.
• Fenix Web Server - Fenix est un serveur web de bureau statique simple. Bon pour les développeurs et les concepteurs travaillant avec des sites statiques. Avec Fenix, vous pouvez lancer / tuer des serveurs Web statiques, il détecte automatiquement les ports disponibles. Inclut un conteneur de requêtes, un support Growl, un rendu Markdown et un outil de ligne de commande lisse. Vous permet de gérer visuellement des sites locaux côte à côte, avec des vignettes, des journaux et bien plus encore, de développer localement et de partager en ligne via localtunnel.
• NW.js - NW.js vous permet d'appeler tous les modules Node.js directement à partir de DOM et permet une nouvelle façon d'écrire des applications dans HTML5, CSS3, JS et WebGL modernes.
• Commerce.js - L'outil permet de créer rapidement de belles expériences de commerce électronique qui commencent par quelques lignes de code.
• Valence - Valence est un complément expérimental qui permet aux outils de développement Firefox de déboguer une plus grande variété de navigateurs, pas seulement les navigateurs Firefox, Firefox pour Android et Firefox OS basés sur Gecko. Les cibles de débogage initiales sont Chrome sur Android, Chrome Desktop et Safari sur iOS.
• Etleap - L'outil permet de connecter toutes les sources de données qui vous intéressent, d'analyser vos données plus rapidement que jamais et de ne jamais plus vous soucier d'ETL.
• Code Fight Club - C'est un véritable club de combat pour les codeurs. Ici, vous pouvez voter, commenter ou lancer votre propre combat de code.

Outils de collaboration pour le développement Web

• Figma - Avec figma, vous pouvez faire du travail de conception en ligne, travailler avec les autres sur le même design, en même temps. Votre travail est constamment enregistré (les anciennes versions sont accessibles en un clic). L'outil fonctionne sur n'importe quel système d'exploitation et est gratuit lors de la publication de l'aperçu.

• Getting ready for HTTP/2 - Préparez-vous pour HTTP / 2: un guide pour les concepteurs et développeurs Web par Rachel Andrew.
• Google Accelerated Mobile Pages - Transformez votre AMP en 11: tout ce que vous devez savoir sur les pages mobiles accélérées de Google par Christian Cantrell.
• Improve Google Ranking - 5 façons d'améliorer le classement de Google dans les SERP avec un CDN de Brian Jackson.
• A Frame - L'anatomie d'un cadre par Aerotwist.
• Packt Pub - Ici, vous pouvez consulter certains des livres et vidéos les plus récents, les plus excitants et les plus vendus pour les concepteurs et les développeurs sélectionnés par les éditeurs de sites.

Outils CSS

• HTML Cheat Sheet - Cette feuille HTML interactive contient une liste complète de tous les éléments HTML, y compris des descriptions, des exemples de code et des aperçus en direct.
• Enjoy CSS - Ceci est un générateur CSS avancé pour créer des styles graphiques riches sans codage.
• CSS Typeset - Il suffit de coller le texte que vous souhaitez modifier, puis de copier et coller le code CSS généré dans votre feuille de style..
• One CSS Feature - La fonctionnalité CSS que je veux vraiment par bitsofcode.
• Imperfect Buttons - Boutons de bordure dessinés à la main. Un stylo de Tiffany Rayside.
• Poor Man's Styleguide - C'est un guide de style frontal rapide, conçu pour être copié et collé dans votre CMS. Si vous n'êtes pas Twitter Bootstrap, vous n'avez pas le temps ni l'argent pour créer une bibliothèque de patrons CSS dynamique et personnalisée, utilisez ce guide de style.

Lecture CSS

• Responsive Web Design Tutorial - questions, mythes, problèmes et solutions réelles par Jeff Bell.
• How to Use Variables in Chrome 49 - Propriétés personnalisées CSS: comment utiliser des variables dans Chrome 49 par Ioanni Mitsakis.
• Object Fit and Object Position - Un aperçu rapide de `object-fit` et` object-position` par Robin Rendle.
• Dynamic Portfolio with CSS Scrolling Snap Points - Créez un portfolio dynamique avec défilement CSS Snap Points par le nouveau code.

Outils JS

• Learn JS - Comment apprendre le JavaScript par Derek Sivers.
• MERN - MERN est un outil d'échafaudage qui facilite la création d'applications isomorphes à l'aide de Mongo, Express, React et NodeJS. Il minimise le temps de configuration et vous permet de vous familiariser avec les technologies éprouvées.
• Ember - Programmation fonctionnelle dans Ember - Jeffrey Biles interviewe des développeurs Ember talentueux du monde entier, partageant leurs défis, passions et triomphes.

Lecture JS

• Generating PDFs from Web Pages - Génération de fichiers PDF à partir de pages Web à la volée avec jsPDF par Massimo Cassandro.
• Animating the Unanimatable - Animation de l'unanimité Transitions de réorganisation en douceur dans React.js par Joshua Comeau.
• Consuming Laravel API with AngularJS - Comment consommer l'API Laravel avec AngularJS par Francesco Malatesta.
• Angular Styleguide - Un point de départ pour les équipes de développement angulaire pour assurer la cohérence grâce aux bonnes pratiques.

Outils ES6 

• ES6 - ES6 cheatsheet.
• ES6 Library - Un débutant minimal pour une bibliothèque ES6.
• Descartes - Descartes est une bibliothèque expérimentale d'écriture de CSS en JavaScript pour les programmeurs.
• Search Index - Search-index est un moteur de recherche en texte intégral persistant pour le navigateur et Node.js.

Lecture ES6

• JavaScript Promises - JavaScript Promises – comment elles fonctionnent par Matt Behrens.
• JS Promise Object - JavaScript: comment définir et traiter un objet de promesse par Ajitesh Kumar.
• Emails with Gmail JavaScript API - Envoi d'e-mails avec l'API JavaScript Gmail par Jamie Shields.
• Ajax/jQuery.getJSON Example - Ajax / jQuery.getJSON exemple simple par Florian Rappl.

• Waka Time - Ceci est un plugin pour quantifier votre codage. Les métriques, les informations et le suivi du temps sont générés automatiquement à partir de votre activité de programmation.
• okayNav jQuery Plugin - Ce plugin vise à réduire progressivement les liens de navigation dans une navigation hors écran au lieu de le faire pour tous les liens en même temps..
• jQuery easypin - Plugin simple et rapide épinglant des objets sur des photos.
• Sticky Elements - Créer des éléments adhésifs et des liens adhésifs.

• Hour of Code - Dans cette édition spéciale de Hour of Code de Box Island, vous apprendrez les bases des algorithmes, des séquences, des boucles et des conditions. Le tutoriel est dirigé par des étudiants et convient à tous les âges.
• Codingame - Apprenez et améliorez vos compétences de codage tout en jouant à des jeux.
• Hopscotch - Explorez les principes fondamentaux de CS tels que l'abstraction, les variables, les conditions, les boucles, etc.
• MeteorToys - Des outils de développement extrêmement pratiques pour vous aider à créer de superbes applications. L'utilisation de MeteorToys augmente la vitesse de votre travail grâce aux problèmes et vous aide à créer des solutions finies et plus rapides.
• ScratchJr - Avec ScratchJr, les jeunes enfants peuvent programmer leurs propres histoires et jeux interactifs. Dans le processus, ils apprennent à résoudre des problèmes, à concevoir des projets et à s'exprimer de manière créative sur l'ordinateur. Convient aux enfants de 5-7 ans.

Vous venez de parcourir 137 outils de conception et de développement Web et des ressources utiles. Vous ont-ils été utiles ? Si votre réponse est "oui", veuillez préciser lesquelles vous ont le plus impressionné dans la section des commentaires.