Les outils et les applications intelligents, en particulier ceux qui permettent de gagner du temps, sont indispensables aux concepteurs. Et nous avons rassemblé quelques-uns des plus récents et des meilleurs de cette liste d'outils gratuits pour les concepteurs!
Des éléments d'aide à la typographie aux extraits de code et aux palettes de couleurs que vous pouvez télécharger, cette liste est remplie d'articles du quotidien pour faciliter votre vie de conception. Plongez et trouvez des outils gratuits et pratiques pour simplifier votre flux de travail.
1. Gradients Web
Qui n'aime pas un bon dégradé? WebGradients est une collection de 180 dégradés linéaires que vous pouvez utiliser comme arrière-plan de contenu dans n’importe quelle partie de votre site Web. Copiez le code de navigateur transversal CSS3 ou téléchargez les versions PNG, Sketch orhopPhotoshop.
2. Liste de contrôle de typographie sans faille
La liste de Typewolf est un cours de master complet en typographie qui sert également d’outil interactif pour vous aider à éviter les catastrophes de type. La liste est complète et fournit des instructions simples pour vous aider à corriger les erreurs.
3. Couleurs LOL
Besoin d'une palette de couleurs inspirante? LOL est rempli de quads de couleurs (et de codes HEX) pour vous aider à trouver des combinaisons que vous n’auriez peut-être pas envisagées.
4? resizr
Testez la réactivité de votre site Web avec cet outil qui vous permet de saisir une URL et de la voir comme le font les utilisateurs sur différents appareils. Vous pouvez également basculer entre les vues paysage et portrait.
5. Statistiques CSS
À quoi ressemblent vos feuilles de style? CSS Stats est un outil génial qui analyse tout dans un format utilisable. (C'est une aide précieuse si vous voulez voir quelle couleur ou quelle police est incluse dans un dessin.)
6. Adobe Spark
L'outil Spark d'Adobe est un générateur d'images gratuit, idéal pour la création de graphiques promotionnels pour les médias sociaux. Cet outil est rapide et vous évite de passer énormément de temps sur ces petites images. (Et comme il fonctionne comme la plupart des autres produits Adobe, il n’ya pas de véritable courbe d’apprentissage.)
7. Google Web Designer
Cette application est toujours en version bêta, mais vous aide à créer des conceptions interactives engageantes, basées sur HTML5, et des graphiques animés pouvant être exécutés sur n'importe quel appareil. Qui ne voudrait pas de cette aide de Google?
8. Bibliothèque de polices
Tenez-vous au courant de toutes ces polices Google à l'aide de cet outil qui vous aidera à marquer et à organiser tout ce que vous avez utilisé.
9. Quelle est la police
Vous ne savez pas quelle est la nouvelle police de caractères que vous continuez de voir? Quelle police est vous permet de télécharger une image ou de spécifier une URL et d'obtenir des correspondances de type. Il fournit également une belle liste de correspondances pour vous aider à trouver la police de caractères appropriée.
10. Mort au stock
Ceci est un site de stock photo qui n’a pas l’aspect traditionnel des photos de stock. Chaque mois, les abonnés reçoivent un pack gratuit de photos à utiliser comme bon leur semble et chacune d'elles est organisée par différents photographes.
11. Todoist
Todoist est une petite application de liste de contrôle pratique. Utilisez-le pour suivre les projets dans l'interface élégante et minimaliste, facile à utiliser et sans encombrement.
12. Bulma
Bulma est un framework CSS simple et moderne construit sur Flexbox. Il est modulaire et réactif, et chaque élément du code provient de sources ouvertes sur GitHub.
13. Musique pour la programmation
Pardonnez le dessein brutaliste; utilisez la fonction géniale de Musique pour la programmation. Le site est un ensemble collaboratif de mixages musicaux conçus pour être écoutés lors de la programmation. (Ou vous pouvez simplement en faire votre liste de lecture pour à peu près n'importe quoi.)
14. PlaceIt
Si vous avez besoin d'une maquette pour présenter vos projets, ce site propose plus de 2 500 options de création commune.
15. Règle CSS
Utilisez cet outil pour voir les différences entre les longueurs CSS - police relative, pourcentage de la fenêtre et absolu. Entrez vos valeurs et allez.
16. Patterninja
Cette petite application prend n'importe quelle image - vous pouvez utiliser la vôtre ou utiliser la bibliothèque gratuite - et la transformer en un motif à utiliser dans différents types de projets. C'est un outil avec lequel vous pouvez jouer toute la journée sans vous ennuyer.
17. Cartes à thème
Trouvez tous les meilleurs thèmes gratuits pour WordPress, Bootstrap et plus au même endroit. De plus, chaque thème et modèle sur le site est réactif, vous n'aurez donc pas à vous frayer un chemin dans l'encombrement.
18. Tapez n'importe quoi
Vous pensez avoir une palette de typographie parfaite jusqu'à ce que vous la trouviez dans le CSS et vous réalisez que les choses ne fonctionnent pas comme prévu? Tout type vous permet de créer de superbes combinaisons de polices visibles à l'écran, en ajustant tout, de la police à la taille en passant par l'espacement. Testez-le avant de le coder.
19. Img2CSS
Convertissez n'importe quelle image en CSS pur. Il suffit de télécharger votre image et de regarder la magie se produire.
20. Glyphdiff
Comparez deux polices avec cet outil. Choisissez deux polices de caractères de la même famille ou des combinaisons très différentes pour le plaisir.
21. Impalette
Recherchez les couleurs dominantes dans les images avec une grille basée sur Pantone. Ce qui rend l’outil exceptionnellement agréable, c’est qu’il offre également de nombreuses options de couleur.
22. centre visuel
Trouvez le centre visuel des objets à l'aide de cet outil. (Vous pourriez être surpris de voir où certaines images tombent.) Vous pouvez également demander aux plug-ins Sketch ou Illustrator d'utiliser l'outil en mode hors connexion.
23. modèles de héros
Cette base de données contient des arrière-plans SVG répétables que vous pouvez utiliser pour des projets Web. Ajustez les couleurs de premier plan et d’arrière-plan, l’opacité et le téléchargement.
24. Auditeur du site
Ne vous inquiétez pas pour l'optimisation des moteurs de recherche. Site Auditor analyse votre site pour rechercher les problèmes de référencement susceptibles d'empêcher votre site de figurer dans les moteurs de recherche tels que Google. Il fournit des problèmes et des solutions pour vous aider à optimiser votre site. (Gratuit pour un site, jusqu'à 50 pages.)
25. Sketchpacks
Recherchez et gérez les plug-ins de l'application Sketch directement dans la barre de menus. L'installation en un seul clic.
26. Développement Web éthique
Aidez à créer un meilleur site Web en tant que concepteur éthique. Cette liste comprend de nombreux principes et directives pour vous aider à rester en contact avec le monde.
27. Générateur de points d'arrêt d'image réactif
L'outil vous aide à choisir les meilleures résolutions d'image pour différentes tailles d'écran en utilisant un concept algorithmique pour rechercher les valeurs de largeur d'image offrant une réduction significative de la taille du fichier.
28. Unsplash
Unsplash est une autre base de données de photographies haute résolution. Rechercher dans la base de données ou vous abonner et obtenir des photos dans votre boîte de réception.
29. Palette de conception matérielle
Everything Material Design est à la mode de nos jours, en particulier pour les choix de couleurs vives. Cet outil vous aide à choisir les couleurs, à voir leur apparence dans le dessin et à fournir une palette téléchargeable avec des variantes.
30. Termes de type
Si le jargon de la typographie vous semble encore étranger de temps en temps, cette aide-mémoire de typographie animée vous aidera à apprendre la langue rapidement.