Accentsconagua
Share
GitHub is een geweldige plek om projecten te vinden die gratis worden verspreid onder het publiek, maar heb je ooit een repo in de hoofdrol gehad om te vergeten hoe cool en nuttig het zou kunnen zijn? In deze round-up zal ik enkele fantastische projecten aan het licht brengen die gratis beschikbaar zijn op GItHub, met een sterke focus op het helpen van interface-ontwerpers om te bouwen voor het web.
Bytegroottepictogrammen zijn kleine stijlgestuurde SVG-pictogramsets. Een hulpbron als deze kan erg handig zijn als je geen specifieke set iconen hebt die helemaal opnieuw zijn ontworpen om te voldoen aan de behoeften van je context.
"Elk pictogram is met de hand gecodeerd langs een raster van 32x32 en gebruikt een SVG-streek voor maximale stijlflexibiliteit; wat betekent dat je het gewicht, de kleur en de grootte kunt aanpassen en of je de randen rond of vierkant wilt hebben. "
Alle 92 pictogrammen wegen in op 10,5 kb verkleind of 2,9 kb in .SVGZ. Laat elk pictogram inline direct op uw pagina neerzetten of laad het op via een extern SVG-bestand en de gebruik label. U kunt dan eenvoudig het gewicht van het pictogram wijzigen door de streekbreedte attribuut, evenals het veranderen van de vorm van de lijndoppen en de lijn waarmee wordt samengevoegd stroke-linecap en stroke-linejoin. Hierdoor verandert de stijl van de pictogrammen door ze afgerond of vierkant te maken. Al deze streekeigenschappen zijn ook beschikbaar voor gebruik in CSS, mocht u dat willen.
Shade is een wiskundig afgeleide gradiëntverkenner die u schuifregelaars geeft om de gewenste resultaten te beheren.
U kunt de tint, verzadiging, lichtheid en elke bijbehorende optie voor de verloopstrook aanpassen. Het enige nadeel dat ik momenteel zie, is dat ik niet de mogelijkheid heb om de hellingshoek te regelen, maar het is echt geweldig om de uitvoer in visuele zin samen met de juiste CSS te verkrijgen. Een waardevol hulpmiddel voor mensen die steeds vaker gradiënten gebruiken in hun ontwerpwerk.
Materialise is een front-end framework op basis van Material Design van Google. Het beweert gebruikersgericht te zijn, eenvoudig te gebruiken en versnelt de ontwikkeling bij het ontwerpen en bepalen van interfacecomponenten.
Kies uit verschillende componenten, JavaScript-bestuurde widgets en nog veel meer. Voor degenen die Sass gebruiken, zult u blij zijn om te horen dat u het kleurenschema van uw elementen extreem snel kunt wijzigen met een eenvoudig te gebruiken en te lezen variabelenbestand.
Patronen op het web kunnen op verschillende manieren worden toegepast, hetzij met afbeeldingen of CSS, maar patrooneffecten kunnen ook worden bereikt met SVG, die scherp blijft op elke schermresolutie en een compacte bestandsgrootte heeft.
Deze patronen kunnen op drie manieren worden gebruikt met behulp van SVG-patronen defs, CSS achtergrondafbeeldingen en het gebruik van patroonvullingen via D3.js. Kleuren kunnen voor elk patroon worden aangepast en u kunt zelfs nieuwe patronen voor opname in de repo indienen. Dit kan erg handig zijn voor elk patroon dat je misschien nodig hebt voor je interfaceontwerp dat je smeekt om herhaald te worden terwijl je de scherpte behoudt en de bestandsgrootte onder controle houdt.
Dit is echt een handig project voor mensen die met interfaces werken; het stelt gebruikers in staat om producten of favoriete items te waarderen.
Elke beoordelingsoptie is voor iedereen toegankelijk, inclusief toetsenbordbediening, en wordt geleverd met een vleugje animaties. Het project bevat momenteel acht verschillende beoordelingsopties om uit te kiezen, maar u kunt natuurlijk altijd een nieuw idee / patroon indienen dat moet worden opgenomen in de momenteel beschikbare patronen.
Als u goed bekend bent met Sass, kunt u de beoordelingswidget aanpassen aan uw behoeften, bijvoorbeeld door een systeem met 10 sterren te gebruiken of de omtrek uit te schakelen en te zweven. Dit kan worden gedaan door true / false-waarden in te stellen voor de variabelen in het bestand _variables.scss en de taak Gulp uit te voeren om de bestanden te verwerken.
Het verzamelen van echte inhoud voor ontwerpen wordt steeds belangrijker om te begrijpen hoe gebruikers omgaan met uw componenten.
Lijsten is een galerij met actuele inhoud die klaar staat om uw mockups te vullen. Exporteer lijsten naar JSON-bestanden en importeer ze in een Google-spreadsheet, kopieer inhoud naar uw klembord en kies uit 16 categorieën, variërend van entertainment tot educatie. Met lijsten kunt u ontwerpen met echte inhoud om slimmere beslissingen te nemen en sneller te werken.
Dit is een Sketch-plugin om elke afbeelding op je klembord te plakken als vulling voor elke vorm!
Het is uitermate handig als u comps maakt en geen tijd wilt verspillen aan het vinden van afbeeldingen en het importeren ervan in uw project; vooral als je beelden in verschillende vormen wilt plaatsen. Supersnel, supereenvoudig en super fantastisch om de workflow te versnellen.
Schetsmateriaal is een Sketch-plug-in die u helpt complexe Materiële componenten te genereren, zoals tabellen, fiches, formulieren, knoppen, tooltips en meer.
Als u mockups maakt, kan dit de efficiëntie en snelheid in uw workflow enorm verbeteren. Een van mijn favoriete onderdelen is het hoogteaspect waarmee je snel toegang hebt tot de heerlijke slagschaduwen van Material Design. Sketch Material richt zich op het harde werk, zodat u zich kunt concentreren op de belangrijke dingen zoals ontwerp, ontwerp en ontwerp.
Kant-en-klare schetsbladen voor apparaten. Alle bestanden bevatten een lege en gestippelde rastersjabloon in .png- en .pdf-indeling en bevatten een breed scala aan apparaten.
Deze bladen kunnen niet alleen worden afgedrukt, maar kunnen ook worden gebruikt in uw digitale software voor het maken van snelle mockups. Omdat het project gratis beschikbaar is en wordt gehost op GitHub, kun je altijd voorstellen om een nieuw apparaat op te nemen als je niet degene vindt die je nodig hebt.
Ik heb slechts de oppervlakte met de hier vermelde projecten afgeroomd en zou graag horen over anderen die u nuttig vindt in uw dagelijkse werkzaamheden met betrekking tot UI-ontwerp. Laat hieronder uw opmerkingen en suggesties achter en blije codering!
