Accentsconagua
Share
GitHub er et flott sted å finne prosjekter som er fritt distribuert til offentligheten, men har du noen gang stjålet en repo for å glemme hvor kul og nyttig det kan være? I denne rundboken vil jeg fremheve noen fantastiske prosjekter som er fritt tilgjengelige på GItHub, som har et sterkt fokus på å hjelpe grensesnittdesignere bygge for nettet.
Byte Size Icons er små stilstyrte SVG ikon sett. En ressurs som dette kan være super nyttig hvis du ikke har et bestemt sett med ikoner som er designet fra grunnen til å passe til behovene til konteksten din.
"Hvert ikon er håndkodet langs et 32x32-grid, og bruker SVG-slag som gir maksimal fleksibilitet i stilen. noe som betyr at du kan justere vekt, farge, størrelse og hvis du vil at kantene kan være runde eller firkantede. "
Alle 92 ikoner veier inn på 10,5 kb minifisert eller 2,9 kb i .SVGZ. Slett hvert symbol direkte inn på siden din etter behov, eller last dem opp via en ekstern SVG-fil og bruk stikkord. Du kan så enkelt endre vekten på ikonet ved å endre slag-bredde attributt så vel som å endre formen på linjeskiftene og linjen knytter seg til slag-linecap og slag-linejoin. Dette vil endre stilen på ikonene ved å gjøre dem avrundet eller kvadret. Alle disse strokeegenskapene er også tilgjengelige for bruk i CSS hvis du velger å.
Skygge er en matematisk avledet gradientutforsker som gir deg glidebrytere for å kontrollere de ønskede resultatene.
Du kan justere fargetone, metning, lyshet, sammen med hvert tilsvarende alternativ for gradientspredningen. Den ulempen jeg ser for øyeblikket, har ikke muligheten til å kontrollere gradientvinkelen, men å få utdataene i en visuell forstand sammen med riktig CSS er virkelig flott. Et verdig verktøy for de som bruker gradienter mer og mer i sitt designarbeid.
Materialisere er et front-end-rammeverk basert på Googles Material Design. Det hevder å være brukerfokusert, brukervennlig og bidrar til å øke hastigheten på utviklingen når du utformer og bestemmer grensesnittkomponenter.
Velg mellom en rekke komponenter, JavaScript-kontrollerte widgets og så mye mer. For de som bruker Sass, vil du gjerne høre at du kan endre fargevalg av elementene dine ekstremt raskt med en enkel å bruke og lese variabler fil.
Mønstre på nettet kan brukes på flere måter, enten med bilder eller CSS, men mønstereffekter kan også oppnås ved å bruke SVG som vil forbli skarp på en hvilken som helst skjermoppløsning og kompakt i filstørrelse.
Disse mønstrene kan brukes på tre måter med bruk av SVG mønstre defs, CSS bakgrunnsbildeadresser og bruk mønsterfyll via D3.js. Farger kan tilpasses for hvert mønster, og du kan til og med sende inn nye mønstre for inkludering til repo. Dette kan være veldig nyttig for ethvert mønster du kanskje trenger for grensesnittet ditt, som ber om å bli gjentatt samtidig som du opprettholder skarphet og holder filstørrelsen under kontroll.
Her er et veldig praktisk prosjekt for de som jobber med grensesnitt; det tillater brukere å rangere produkter eller favorittartikler.
Hvert ratingalternativ er tilgjengelig for alle, inkludert tastaturkontroll, og kommer med et snev av animasjoner bakket inn. I øyeblikket inneholder prosjektet åtte forskjellige ratingalternativer, men du kan selvfølgelig alltid sende inn en ny ide / mønster som skal inkluderes blant de tilveiebragte mønstrene.
Hvis du er velbevandret med Sass, kan du justere rating-widgeten til dine behov, for eksempel å ha et 10-stjerners basert system eller slå av kontur og svinger. Dette kan gjøres ved å sette ekte / falske verdier til variablene i filen _variables.scss og kjører Gulp-oppgaven for å behandle filene.
Å samle inn ekte innhold for design blir stadig viktigere for å forstå hvordan brukere samhandler med komponentene dine.
Lister er et galleri med faktisk innhold som er klart for å fylle ut dine mockups. Eksporter lister til JSON-filer og importer inn i et Google-regneark, kopier innhold til utklippstavlen, og velg blant 16 kategorier alt fra underholdning til utdanning. Lister lar deg designe med ekte innhold for å gjøre smartere beslutninger og jobbe raskere.
Dette er et Sketch-plugin for å lime inn hva bildet er på utklippstavlen som fyllet for en hvilken som helst form!
Det er ekstremt praktisk hvis du lager comps og ikke vil kaste bort tid på å finne bilder og importere dem til prosjektet ditt. spesielt når du vil plassere bilder i forskjellige former. Super rask, super enkel og super fantastisk for å øke hastigheten på arbeidsflyten.
Skissemateriale er et Sketch-plugin som hjelper deg med å generere komplekse materialkomponenter som tabeller, sjetonger, skjemaer, knapper, verktøytips og mer.
Hvis du lager mockups, kan dette i stor grad forbedre effektiviteten og hastigheten i arbeidsflyten din. En av mine favorittdeler er høyden som gir deg rask tilgang til Material Design's deilige dropshadows. Sketch Material fokuserer på det harde arbeidet, slik at du kan fokusere på de viktige tingene som design, design, design.
Klar til å skrive ut enhetsskisseark. Alle filene inneholder en tom og stiplede gridmal i .png og .pdf-format og inneholder et bredt utvalg av enheter.
Disse arkene kan ikke bare skrives ut, men kan også brukes i den digitale programvaren du velger for å lage raske mockups. Siden prosjektet er fritt tilgjengelig og vert på GitHub, kan du alltid foreslå at en ny enhet skal inkluderes hvis du ikke finner den du trenger.
Jeg har bare skummet overflaten med prosjektene som er nevnt her, og vil gjerne høre om andre som du finner nyttige i ditt daglige arbeid med UI-design. Legg igjen dine kommentarer og forslag nedenfor og lykkelig koding!
