10 frammenti di codice per creare bellissime forme

Ogni sito Web di solito ha bisogno di un tipo di modulo, che si tratti di una pagina di pagamento o di una semplice pagina di contatto.

È fondamentale assicurarsi che i moduli funzionino, quindi l'usabilità è il numero 1. Ma anche l'estetica è importante poiché i design affidabili sono sempre più accattivanti.

Se sei bloccato per idee di design, questa raccolta potrebbe aiutarti. È una raccolta di 10 modelli di moduli con codice sorgente gratuito. Troverai molte combinazioni di colori, stili di campo di input, stili tipografici e molto altro ancora.

Inoltre, questi sono tutti ospitati gratuitamente, quindi puoi copiare e giocare con il codice a tuo piacimento.

1. Progettazione materiale

Tutti conoscono il linguaggio di progettazione dei materiali di Google durante la sua ascesa alla fama negli ultimi anni. I concetti di design dei materiali erano rivolti alle app Android ma si sono rapidamente diffusi sul web.

Se ti piace lo stile minimalista dell'interfaccia utente dei materiali di Google, dai un'occhiata a questo modulo materiale creato da Jon Uhlmann.

Funziona su Sass e Pug per la preelaborazione CSS/HTML. È anche una forma piuttosto leggera e gli elementi di design dei materiali dovrebbero essere visualizzati allo stesso modo in tutti i browser.

Davvero un'ispirazione per tutti voi designer di materiali là fuori.

2. Sotto il mare

Fai un viaggio nell'oceano in questo modulo di contatto davvero unico costruito con uno stile acquatico.

Lo sfondo dell'intera pagina utilizza uno schema ripetuto per creare le onde dell'acqua dell'oceano. Ma i piccoli pesciolini animati sono tutta un'altra storia che si anima in vista da un'immagine di sfondo.

Inoltre, ogni volta che selezioni un campo di input, un simpatico polpo si presenta per un saluto. Che caratteristico!

3. Modulo Bootstrap 3

Gli stili Bootstrap predefiniti sono piuttosto noiosi e sono stati davvero usati a morte a questo punto. Ogni volta che vedo un sito Bootstrap con gli stessi stili generici, posso solo immaginare che il designer fosse troppo pigro per personalizzare o troppo concentrato sull'esperienza per preoccuparsene.

Questo modulo BS3 fa le cose per bene basandosi sul framework Bootstrap. Utilizza alcuni restyling sui campi di input e sul pulsante di invio per creare un adorabile modulo Bootstrap che non avresti mai saputo fosse Bootstrap'd.

Se stai eseguendo un layout BS3, consideri sicuramente di rielaborare i tuoi moduli in questo modo. Puoi anche provare a utilizzare un framework di terze parti costruito su Bootstrap per un design più personalizzato.

4. Contatto elegante

Con le icone Font Awesome e alcuni stili reattivi di base, questo modulo di contatto è davvero unico nel suo genere.

Consiglio sempre di aggiungere icone nei moduli, soprattutto per i design più grandi. Con più campi ottieni più esitazione e gli utenti vogliono solo volare attraverso i moduli senza intoppi.

Queste semplici icone aggiungono un segnale a ciascun campo, quindi è facile dire a colpo d'occhio che tipo di informazioni è necessario.

E se stai cercando qualcosa di un po' unico, prova ad aggiungere un iconfont diverso al mix.

5. Accesso minuscolo

A volte le piccole cose sono davvero le cose migliori. E questa interfaccia utente del modulo lo dimostra creando un modulo di accesso super minimizzato che oscilla.

La tipografia è enorme con il design dei moduli e spesso preferisco caratteri tipografici più piccoli nei campi di accesso. Dipende davvero dal sito Web e da quanto bene il testo più piccolo si fonde con il layout.

Ma questo modulo ha anche un piccolo grafico della fase di avanzamento appeso lateralmente che spiega il processo del modulo. Concesso con solo due campi questo tipo sembra sciocco, ma per moduli di registrazione più grandi quella barra di avanzamento si rivelerà preziosa per l'esperienza dell'utente.

6. Combinazione di accesso e registrazione

Se vuoi ridurre i tempi di accesso potresti provare a combinare il modulo di accesso e il modulo di registrazione in un'unica pagina. È molto più facile di quanto potresti pensare e puoi vedere una dolce demo in questo pe .

Ogni volta che fai clic sui collegamenti di accesso/registrazione a lato, troverai una bellissima animazione personalizzata che ruota i moduli in vista. È tutto alimentato tramite jQuery ma le animazioni potrebbero funzionare anche tramite CSS.

Ma noto un bug in questo layout in cui la parte inferiore del modulo "nascosto" è ancora visibile dopo il passaggio. Puoi risolvere questo problema con la proprietà di visibilità CSS o spostando la posizione un po' più fuori dai limiti.

7. Contatto lavagna

Ecco uno stile di modulo davvero unico che salta decisamente fuori dalla pagina. Questo modulo di contatto lavagna utilizza un gradiente di sfondo per creare l'effetto della luce che rimbalza sulla lavagna.

Inoltre il bordo di legno aiuta a vendere questa cosa come un vero affare.

Il creatore Greg Sweet utilizza persino un font web personalizzato che assomiglia alla tipica calligrafia umana. Questo è perfetto per aggiungere quel tocco finale al modulo, così ti sembrerà davvero di essere tornato a scuola.

8. Pagamento con carta di credito

Ho visto molti moduli di pagamento, ma questo design di Fabio Ottaviani è forse il migliore in cui mi sia mai imbattuto.

Utilizza JavaScript per gestire la convalida del campo di input ma la carta di credito è tutta CSS. Si anima in base ai numeri inseriti nel modulo e ruota anche sul retro quando si digita il numero CVV della carta di credito.

9. Registrazione personalizzata

Per un puro modulo di registrazione CSS, questo snippet prende davvero il biscotto. Sembra piuttosto semplice riposare in un unico contenitore con una piccola ombra esterna.

Ma i campi di input sono fortemente personalizzati, incluso lo spazio necessario per aggiungere quelle icone a ciascuno.

Ogni volta che si evidenzia un campo, il bordo diventa verde muschio. Noterai che anche l'icona cambia colore! Anche i menu selezionati per le carte di credito hanno i loro stili personalizzati.

Questo è un effetto piuttosto complesso da realizzare esclusivamente in CSS, ma lo sviluppatore Jose Carneiro lo ha realizzato.

10. Etichette mobili

Le etichette mobili personalizzate sono alcune delle mie tendenze preferite nel design dei moduli. Aiutano sempre a migliorare l'usabilità e danno una chiara spiegazione del campo anche dopo averlo compilato.

Dai un'occhiata a questo modulo di etichetta mobile in esecuzione su CSS3 e Compass.

Il creatore Anton Simanov utilizza jQuery per le etichette ma è tutto codificato in modo personalizzato senza plug-in. Per non parlare della sua soluzione funziona per tutti gli stili di input tipici, comprese le aree di testo e i menu di selezione.

Non importa quale stile di modulo stai cercando, spero sicuramente che questa galleria possa darti alcune idee e frammenti per andare avanti.

Più studi i modelli di progettazione, più idee dovrai costruire per i tuoi progetti. E CodePen è un ottimo sito per raccogliere queste idee.