GitHub est un endroit formidable pour trouver des projets librement distribués au public, mais avez-vous déjà enregistré un repo pour oublier à quel point cela pourrait être cool et utile? Dans cette synthèse, je vais mettre en lumière quelques projets fantastiques disponibles gratuitement sur GItHub, qui ont pour objectif principal d'aider les concepteurs d'interfaces à créer pour le Web..
Les icônes de taille en octets sont de minuscules ensembles d'icônes SVG contrôlés par le style. Une ressource comme celle-ci peut être extrêmement utile si vous ne disposez pas d'un ensemble particulier d'icônes conçues de toutes pièces pour répondre aux besoins de votre contexte..
«Chaque icône est codée à la main le long d’une grille 32x32 et utilise un trait SVG, offrant ainsi une souplesse de style maximale. ce qui signifie que vous pouvez ajuster le poids, la couleur, la taille et si vous voulez que les bords soient ronds ou carrés. ”
Les 92 icônes pèsent toutes 10 min. Ou 10,9 Ko. .svgz
. Soit déposez chaque icône directement dans votre page, au besoin, soit chargez-les via un fichier SVG externe et le utilisation
étiquette. Vous pouvez alors facilement changer le poids de l’icône en modifiant le largeur du trait
attribuer ainsi que changer la forme des majuscules de la ligne et la ligne se joint à accident vasculaire cérébral
et accident vasculaire cérébral
. Cela modifiera le style des icônes en les arrondissant ou en les arrondissant au carré. Toutes ces propriétés de trait sont également utilisables en CSS si vous choisissez de.
Shade est un explorateur de dégradé dérivé des mathématiques qui vous donne des curseurs pour contrôler les résultats souhaités..
Vous pouvez régler la teinte, la saturation, la luminosité, ainsi que chaque option correspondante pour l’étalement du dégradé. Le seul inconvénient que je vois actuellement n’est pas d’avoir la possibilité de contrôler l’angle du gradient, mais obtenir la sortie dans un sens visuel avec le code CSS approprié est vraiment formidable. Un outil précieux pour ceux qui utilisent de plus en plus des dégradés dans leur travail de conception.
Materialise est un framework frontal basé sur le Material Design de Google. Il prétend être centré sur l'utilisateur, facile à utiliser et aider à accélérer le développement lors de la conception et de la détermination des composants d'interface.
Choisissez parmi une variété de composants, des widgets contrôlés par JavaScript et bien plus encore. Pour ceux qui utilisent Sass, vous serez ravi d'apprendre que vous pouvez modifier très rapidement le jeu de couleurs de vos éléments avec un fichier de variables facile à utiliser et à lire..
Les modèles sur le Web peuvent être appliqués de différentes manières, avec des images ou des CSS, mais vous pouvez également obtenir des effets de modèles avec SVG qui restera net, quelle que soit la résolution de l'écran et compacte en taille de fichier..
Ces modèles peuvent être utilisés de trois manières différentes en utilisant des définitions de modèles SVG, des URL d’image d’arrière-plan CSS et en utilisant des motifs de remplissage via D3.js. Les couleurs peuvent être personnalisables pour chaque modèle et vous pouvez même soumettre de nouveaux modèles à inclure dans le référentiel. Cela peut être très pratique pour tout motif dont vous pourriez avoir besoin pour la conception de votre interface qui demande à être répété tout en maintenant la netteté et en gardant la taille du fichier sous contrôle..
Voici un projet très pratique pour ceux qui travaillent avec des interfaces; il permet aux utilisateurs d'évaluer les produits ou les articles favoris.
Chaque option de classement est accessible à tout le monde, y compris le contrôle du clavier, et s'accompagne d'animations. Le projet contient actuellement huit options de classement différentes, mais vous pouvez bien sûr toujours soumettre une nouvelle idée / modèle à inclure. les modèles actuellement fournis.
Si vous connaissez bien Sass, vous pouvez ajuster le widget d'évaluation en fonction de vos besoins, par exemple en utilisant un système 10 étoiles ou en désactivant le contour et le survol. Pour ce faire, définissez des valeurs true / false sur les variables du fichier _variables.scss et exécutez la tâche Gulp pour traiter les fichiers..
La collecte de contenu réel pour les conceptions devient de plus en plus importante pour comprendre comment les utilisateurs interagissent avec vos composants.
Listes est une galerie de contenu actuel prête à remplir vos maquettes. Exportez des listes dans des fichiers JSON et importez-les dans une feuille de calcul Google, copiez le contenu dans votre presse-papiers et choisissez parmi 16 catégories, allant du divertissement à l’éducation. Les listes vous permettent de concevoir avec du contenu réel pour prendre des décisions plus intelligentes et travailler plus rapidement.
Ceci est un plugin Sketch pour coller n'importe quelle image dans votre presse-papier en tant que remplissage pour n'importe quelle forme!
C'est extrêmement pratique si vous créez des compositions et que vous ne voulez pas perdre de temps à rechercher des images et à les importer dans votre projet. surtout lorsque vous souhaitez placer des images dans différentes formes. Super rapide, super simple et super fantastique pour accélérer le flux de travail.
Sketch Material est un plugin Sketch qui vous aidera à générer des composants matériels complexes tels que des tableaux, des puces, des formulaires, des boutons, des infobulles, etc..
Si vous créez des maquettes, cela peut considérablement améliorer l'efficacité et la rapidité de votre flux de travail. Une de mes parties préférées est l’aspect altitude qui vous permet d’accéder rapidement aux délicieuses ombres portées de Material Design. Sketch Material se concentre sur le travail acharné afin que vous puissiez vous concentrer sur les choses importantes comme le design, le design, le design.
Prêt à imprimer des feuilles de croquis de périphérique. Tous les fichiers contiennent un modèle de grille vierge et en pointillé au format .png et .pdf et incluent un large éventail de périphériques..
Ces feuilles peuvent non seulement être imprimées, mais peuvent également être utilisées dans le logiciel de votre choix pour la création rapide de maquettes. Puisque le projet est librement disponible et hébergé sur GitHub, vous pouvez toujours suggérer l'inclusion d'un nouvel appareil si vous ne trouvez pas celui dont vous avez besoin..
Je n'ai fait qu'effleurer la surface avec les projets mentionnés ici et j'aimerais beaucoup entendre parler de projets que vous trouverez utiles dans votre travail quotidien concernant la conception d'interface utilisateur. Laissez vos commentaires et suggestions ci-dessous et bonne codage!