Accentsconagua
Share
GitHub este un loc minunat pentru a găsi proiecte care sunt distribuite gratuit publicului, dar ați jucat vreodată un repo doar pentru a uita cât de răcoros și util ar putea fi? În această prezentare voi aduce la lumină câteva proiecte fantastice disponibile pe GItHub care au un accent deosebit pe a ajuta designerii de interfață să construiască pentru web.
Byte Size Icons sunt mici seturi de pictograme SVG pictate în stil. O astfel de resursă poate fi foarte utilă dacă nu aveți un anumit set de pictograme proiectate de la zero pentru a se potrivi nevoilor contextului dvs..
"Fiecare pictogramă este codată manual de-a lungul unei grile 32x32 și utilizează cursa SVG care permite o flexibilitate maximă a stilului; ceea ce înseamnă că puteți ajusta greutatea, culoarea, dimensiunea și dacă doriți ca marginile să fie rotunde sau pătrate. "
Toate cele 92 de icoane cântăresc la 10,5kb minified sau 2,9kb in .SVGZ. Fie căutați fiecare pictogramă în linie direct în pagina dvs., după cum este necesar, sau încărcați-le prin intermediul unui fișier SVG extern și utilizare etichetă. Apoi puteți schimba ușor greutatea pictogramei schimbând accident vascular cerebral lățime atributul, precum și schimbarea formei capacelor de linie și a liniei se alătură accident vascular cerebral-linecap și accident vascular cerebral-linejoin. Acest lucru va schimba stilul icoanelor făcându-le rotunjite sau pătrat. Toate aceste proprietăți ale cursei sunt, de asemenea, disponibile pentru utilizare în CSS dacă alegeți.
Shade este un explorator gradient derivat din matematică care vă oferă cursoare pentru a controla rezultatele dorite.
Puteți regla nuanța, saturația, ușurința, împreună cu fiecare opțiune corespunzătoare pentru răspândirea în gradient. Singurul dezavantaj pe care îl văd în prezent nu are opțiunea de a controla unghiul de înclinație, dar obținerea rezultatelor într-un sens vizual împreună cu CSS-ul propriu-zis este cu adevărat minunat. Un instrument demn pentru cei care folosesc din ce în ce mai mult gradiente în munca lor de proiectare.
Materialalize este un cadru front-end bazat pe designul materialului Google. Acesta pretinde că este orientat spre utilizator, ușor de utilizat și ajută la accelerarea dezvoltării atunci când proiectează și determină componentele interfeței.
Alegeți dintr-o varietate de componente, widget-uri controlate JavaScript și multe altele. Pentru cei care folosesc Sass, veți fi fericiți să auziți că puteți schimba schema de culori a elementelor dvs. extrem de rapid cu un fișier cu variabile ușor de utilizat și citit.
Modelele de pe web pot fi aplicate în mai multe moduri, fie cu imagini, fie cu CSS, dar efecte de tipar pot fi de asemenea realizate folosind SVG care va rămâne ascuțită în orice rezoluție a ecranului și compactă în mărimea fișierului.
Aceste modele pot fi utilizate în trei moduri, utilizând defăturile tiparelor SVG, urlările de imagine de fundal CSS și utilizarea umplerilor de model prin D3.js. Culorile pot fi personalizate pentru fiecare tipar și puteți trimite chiar modele noi pentru includerea în repo. Acest lucru poate fi foarte util pentru orice model de care aveți nevoie pentru proiectarea interfeței dvs. care cere să fie repetate în timp ce mențineți claritatea și mențineți dimensiunea fișierului sub control.
Iată un proiect foarte util pentru cei care lucrează cu interfețe; permite utilizatorilor să evalueze produsele sau articolele preferate.
Fiecare opțiune de rating este accesibilă tuturor, inclusiv controlul tastaturii și vine cu o simplă atingere a animațiilor copiate. În prezent, proiectul conține opt opțiuni diferite de rating pentru a alege, dar, desigur, puteți trimite oricând o nouă idee / model care să fie inclus în modelele furnizate în prezent.
Dacă sunteți bine pregătit cu Sass, puteți ajusta widgetul de rating pentru nevoile dvs., de exemplu, având un sistem bazat pe 10 stele sau opriți schița și plasați cursorul. Acest lucru se poate face prin setarea valorilor true / false la variabilele din fișierul _variables.scss și executarea sarcinii Gulp pentru procesarea fișierelor.
Colectarea conținutului real pentru desene sau modele devine din ce în ce mai importantă pentru înțelegerea modului în care utilizatorii interacționează cu componentele dvs..
Liste este o galerie de conținut real gata să populeze mockups. Exportați liste în fișiere JSON și importați-le într-o foaie de calcul Google, copiați conținutul în clipboard și alegeți din 16 categorii, de la divertisment la educație. Listele vă permit să proiectați cu conținut real pentru a lua decizii mai inteligente și pentru a lucra mai repede.
Acesta este un plugin Sketch pentru a lipi orice imagine este în clipboard ca umplere pentru orice formă!
Este extrem de convenabil dacă creați comps-uri și nu doriți să pierdeți timpul pentru a găsi imagini și a le importa în proiectul dvs. mai ales când doriți să plasați imaginile în diferite forme. Super-rapid, super simplu și super-fantastic pentru a accelera fluxul de lucru.
Materialul Sketch este un plugin Sketch care vă va ajuta să generați componente complexe ale materialelor cum ar fi tabele, chips-uri, formulare, butoane, sfaturi și multe altele.
Dacă creați machete, acest lucru poate îmbunătăți considerabil eficiența și viteza în fluxul de lucru. Unul dintre părțile mele preferate este aspectul de elevație care vă oferă acces rapid la umbrele delicioase ale materialului de design. Sketch Material se concentrează pe munca grea, astfel încât să vă puteți concentra asupra lucrurilor importante precum designul, designul, designul.
Gata de imprimare foi de schiță dispozitiv. Toate fișierele conțin un șablon gol și punctat în format .png și .pdf și includ o gamă largă de dispozitive.
Aceste foi nu pot fi tipărite, ci pot fi folosite în software-ul digital ales de dvs. pentru crearea de machete rapide. Deoarece proiectul este disponibil gratuit și găzduit pe GitHub, puteți sugera mereu un dispozitiv nou care să fie inclus în cazul în care nu îl găsiți pe cel de care aveți nevoie.
Am scazut doar suprafata cu proiectele mentionate aici si ar placea sa aud despre altii pe care ii considerati folositori in munca ta zilnica in ceea ce priveste designul UI. Lăsați comentariile și sugestiile de mai jos și codarea fericită!
