Accentsconagua
Share
GitHub è un ottimo posto per trovare progetti che sono distribuiti gratuitamente al pubblico, ma hai mai recitato in un repository solo per dimenticare quanto può essere bello e utile? In questa carrellata porterò alla luce alcuni fantastici progetti liberamente disponibili su GItHub che hanno un forte focus sull'aiutare i progettisti di interfacce a costruire per il web.
Le icone delle dimensioni dei byte sono insiemi di icone SVG minuscoli controllati dallo stile. Una risorsa come questa può essere di grande aiuto se non si dispone di un particolare set di icone progettato da zero per adattarsi alle esigenze del proprio contesto.
"Ogni icona è codificata a mano lungo una griglia 32x32 e utilizza il tratto SVG che consente la massima flessibilità di stile; il che significa che puoi regolare il peso, il colore, le dimensioni e se vuoi che i bordi siano arrotondati o quadrati. "
Tutte le 92 icone pesano in 10.5kb minified o 2.9kb in .SVGZ. O rilasciare ciascuna icona in linea direttamente nella pagina in base alle esigenze o caricarle tramite un file SVG esterno e il file uso etichetta. È quindi possibile modificare facilmente il peso dell'icona cambiando il stroke-width attributo oltre a cambiare la forma dei tappi di linea e la linea si unisce con ictus linecap e ictus linejoin. Questo cambierà lo stile delle icone rendendole arrotondate o squadrate. Tutte queste proprietà del tratto sono anche disponibili per l'uso in CSS, se lo si sceglie.
Shade è un esploratore gradiente matematicamente derivato che ti dà i cursori per controllare i risultati desiderati.
È possibile regolare tonalità, saturazione, luminosità e ciascuna opzione corrispondente per la diffusione del gradiente. L'unico lato negativo che vedo attualmente non ha la possibilità di controllare l'angolo del gradiente, ma ottenere l'output in senso visuale con il corretto CSS è davvero grandioso. Uno strumento degno per coloro che utilizzano gradienti sempre più nel loro lavoro di progettazione.
Materialise è un framework front-end basato su Material Design di Google. Sostiene di essere focalizzato sull'utente, di facile utilizzo e di accelerare lo sviluppo durante la progettazione e la determinazione dei componenti dell'interfaccia.
Scegli tra una varietà di componenti, widget controllati da JavaScript e molto altro ancora. Per coloro che usano Sass, sarai felice di sapere che puoi cambiare la combinazione di colori dei tuoi elementi in modo estremamente rapido con un file di variabili facile da usare e da leggere.
I pattern sul Web possono essere applicati in più modi, sia con immagini che con CSS, ma gli effetti pattern possono anche essere ottenuti utilizzando SVG che resterà nitido su qualsiasi risoluzione dello schermo e compatto nelle dimensioni del file.
Questi pattern possono essere utilizzati in tre modi utilizzando i modelli SVG defs, gli URL delle immagini di sfondo CSS e l'utilizzo di riempimenti a motivo tramite D3.js. I colori possono essere personalizzabili per ogni modello e puoi anche inviare nuovi modelli da includere nel repository. Questo può essere molto utile per qualsiasi modello che potrebbe essere necessario per la progettazione dell'interfaccia che richiede di essere ripetuto mantenendo la nitidezza e mantenendo la dimensione del file sotto controllo.
Ecco un progetto davvero a portata di mano per chi lavora con le interfacce; consente agli utenti di valutare prodotti o articoli preferiti.
Ogni opzione di valutazione è accessibile a tutti, incluso il controllo della tastiera, e viene fornita con un tocco di animazione. Attualmente il progetto contiene otto diverse opzioni di valutazione tra cui scegliere, ma ovviamente puoi sempre inviare una nuova idea / modello da includere tra i modelli attualmente forniti.
Se sei esperto di Sass, puoi adattare il widget di valutazione alle tue esigenze, ad esempio disponendo di un sistema a 10 stelle o disattivando lo schema e il passaggio del mouse. Questo può essere fatto impostando valori true / false sulle variabili nel file _variables.scss ed eseguendo l'attività Gulp per elaborare i file.
La raccolta di contenuti reali per i progetti sta diventando sempre più importante per comprendere come gli utenti interagiscono con i componenti.
Liste è una galleria di contenuti reali pronti a popolare i tuoi prototipi. Esporta gli elenchi in file JSON e importa in un foglio di lavoro Google, copia i contenuti negli Appunti e scegli tra 16 categorie che vanno dall'intrattenimento all'istruzione. Le liste ti consentono di progettare con contenuti reali per prendere decisioni più intelligenti e lavorare più velocemente.
Questo è un plug-in di Sketch per incollare qualunque immagine sia presente negli Appunti come riempimento per qualsiasi forma!
È estremamente comodo se crei composizioni e non vuoi perdere tempo a trovare immagini e importarle nel tuo progetto; soprattutto quando si desidera posizionare le immagini in forme diverse. Super veloce, super semplice e super fantastico per velocizzare il flusso di lavoro.
Il materiale dello schizzo è un plug-in di Sketch che ti aiuterà a generare componenti materiali complessi come tabelle, chip, moduli, pulsanti, descrizioni comandi e altro.
Se crei prototipi, puoi migliorare notevolmente l'efficienza e la velocità del tuo flusso di lavoro. Una delle mie parti preferite è l'aspetto dell'elevazione che ti consente di accedere rapidamente alle deliziose ombre esterne di Material Design. Sketch Material si concentra sul duro lavoro in modo che tu possa concentrarti su cose importanti come design, design, design.
Pronto per stampare i fogli di schizzo del dispositivo. Tutti i file contengono un modello di griglia vuoto e punteggiato in formato .png e .pdf e includono un'ampia gamma di dispositivi.
Questi fogli possono non solo essere stampati, ma possono essere utilizzati nel software digitale scelto per creare prototipi rapidi. Poiché il progetto è disponibile gratuitamente e ospitato su GitHub, puoi sempre suggerire un nuovo dispositivo da includere nel caso in cui non trovi quello di cui hai bisogno.
Ho solo sfiorato la superficie con i progetti menzionati qui e mi piacerebbe sentire parlare di altri che trovi utili nel tuo lavoro quotidiano per quanto riguarda la progettazione dell'interfaccia utente. Lascia i tuoi commenti e suggerimenti qui sotto e felice codifica!
