it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Login / Modulo di iscrizione: idee e bellissimi esempi

In tutto il web moderno, stiamo vedendo una quantità crescente di posti per l'input dell'utente. Questi includono i carrelli della spesa, i giochi web interattivi e quasi certamente i moduli di registrazione del sito web. Sembra che non solo i designer debbano concentrarsi sul design delle pagine, ma anche l'aspetto estetico è altrettanto importante.

Considera quanti moduli potresti avere compilato nel corso della tua cronologia di Internet. Ci sono innumerevoli esempi di questi da forum, bacheche, blog e tanti altri. In questo articolo daremo un'occhiata ad alcuni trucchi per progettare i moduli in-page.

È saggio considerare alcuni degli articoli qui da una prospettiva oggettiva. Sebbene molti moduli di login e registrazione funzionino bene con un tipo di sito, non esiste una chiamata definitiva su quale sia la "migliore" soluzione. Usa la tua intuizione progettuale per applicare pezzi e pezzi dalle forme a cui aspiri.

Considera più ingressi

Per iniziare, prendi in considerazione un piccolo modulo di contatto di Foundation Six Web Design. Sì, questo non è un modulo di accesso in modo che possa orientarsi un po 'fuori tema. Tuttavia, il loro design di pagina è molto impressionante e ti mostra ciò che un po 'di creatività può ottenere.

Ciascuno dei campi di input offre spazio per la digitazione di informazioni di contatto personali - nome, e-mail, ecc. Gli stili vanno ben oltre l'ordinario, offrendo input dell'utente in un tipo di calligrafia manoscritta. Questo tipo di formattazione manterrà gli utenti in uno stato di meraviglia e raggiungerà l'obiettivo di standard di progettazione molto più elevati.

Dovrai implementare stili come questi simili a tutte le tue pagine di accesso. Certamente non consiglierei di attenersi allo stesso stile di testo di input e di opzioni / menu di selezione. Quando fai jogging per la tua creatività, pensa a come ogni elemento dovrebbe essere disposto: un sacco di spazio tra gli strati, un testo facilmente leggibile e persino i collegamenti della barra laterale alla loro linea di posta elettronica diretta.

jQuery Login Boxes

Questo è stato usato in innumerevoli siti web in passato e sarà sicuramente visto all'interno di progetti new age. Sono ormai lontani i giorni in cui le pratiche standard avrebbero portato gli utenti su una nuova pagina per ogni fase del processo di accesso. Normalmente questo significherebbe una pagina per inserire i tuoi dati e anche una nuova pagina per l'elaborazione delle informazioni di accesso.

Pixel2Life offre alcune informazioni fantastiche su un nuovo campo di input dei dati. Dalla loro homepage è possibile fare clic sul collegamento di accesso e visualizzare una casella di accesso dinamica basata su jQuery. Questo modulo contiene una chiamata Ajax a uno script PHP esterno che controlla le credenziali delle informazioni di accesso e, una volta elaborato, concede o nega l'accesso.

Facendo un altro passo avanti, l'astuto potrebbe notare un link di registrazione direttamente sotto la casella di login. Ciò offre un'esperienza utente molto più agevole per coloro che desiderano registrarsi per il sito Web ma non sono in grado di individuare il collegamento di registrazione.

Se un utente non ha un account ma vorrebbe crearne uno, questo li porta sulla pagina di registrazione senza errori di buggy page. La casella di accesso sarebbe comunque un'opzione valida per accedere al proprio account, tuttavia l'opzione consente di ottenere maggiori profitti e maggiori volumi di nuovi dichiaranti.

Semplici registrazioni di una sola pagina

Un altro paradigma mutevole che vediamo è la mancanza di dettagli tali per le nuove registrazioni di account. Questa non è necessariamente una statistica errata se si presume che gli utenti siano sempre più impazienti di riempire i dati. I numeri in realtà suggeriscono che i siti Web con pagine di registrazione più brevi accumulano quotidianamente elenchi più pesanti di nuovi utenti.

Sikbox offre un'opzione leggera per i visitatori di creare la propria casella di ricerca per un sito web. L'unico requisito è il tuo dominio personalizzato per fornire risultati di ricerca. I campi di input sono grandi, il testo è molto semplice da leggere e non ci sono assolutamente pubblicità per distrarre gli utenti dal compito di costruire il loro modulo di ricerca!

Ora questo non è il miglior modulo da compilare quando crei la tua pagina di registrazione per un forum o un archivio di blog. Questi, per definizione standard, richiedono almeno un qualche tipo di combinazione indirizzo email / nome utente insieme a una password. Alcune applicazioni web di nuova generazione generano password dinamiche per gli utenti solo per rendere più rapido il processo di registrazione.

Ovviamente, il compromesso qui manca di controllo sulla parte dell'utente per generare la propria password a cui molte persone sono abituate.

Costruisci effetti appariscenti

Una delle più grandi esperienze di registrazione che abbia mai avuto è stata la creazione del mio primo account Tumblr. La home page del loro sito offre sia un login che un modulo di iscrizione posti direttamente l'uno sotto l'altro con nuovi effetti highlight / dissolvenza CSS3.

Questo approccio sistematico è simile per quanto riguarda l'area di accesso jQuery di Pixel2Life. Tuttavia, la differenza con Tumblr è che la rete non può offrire alcun contenuto a chi non ha un blog (oltre a consultare altri account). Il vero vantaggio di tumblr è creare il tuo blog e seguire gli altri, quindi il tuo obiettivo principale in prima pagina è creare un account o accedere.

Ci sono alcuni bug con questo sistema. In particolare all'interno di IE6 / IE7 non supporta queste nuove proprietà CSS. Utilizzato anche nella home page è un sistema per aggiungere elementi di etichette nei valori di input del modulo, in pratica ignorando i caratteri "predefiniti" utilizzati per le caselle email / password.

Queste etichette svaniscono in primo piano nei browser moderni come Chrome / Firefox. Ma nessuna fortuna con i browser deprecati che, come puoi immaginare, è abbastanza fastidioso cercando di rileggere il tuo input!

20+ esempi di Beautiful Form Design

Di seguito una breve raccolta di alcuni fantastici modelli di login. Questi sono stati scelti da tutto il web e comprendono numerose forme di applicazioni web. Se hai suggerimenti per altri siti sentiti libero di condividerli nella sezione commenti qui sotto!

Snoggle News

Robo.to

virB

Grooveshark

Storenvy

Dropbox

Green Globe Ideas

Freshbooks

ThemeForest

MailChimp

Campo base

PROVA Scelta dei colori

AwesomeJS

sblocco

PopScreen

Gowalla

Kontain

MobileMe

Laterthis

Launchlist

Theidealist

Come vuoi imparare il web design?

Come vuoi imparare il web design?

Ti interessa l'apprendimento del web design ma non sei sicuro di quale percorso intraprendere? Bene, in generale ci sono 3 modi principali con cui le persone sul campo imparano il web design. A seconda delle circostanze, potresti trovare un percorso più favorevole degli altri due.In questo semplice post, discuteremo dei vantaggi, degli svantaggi e dei punti salienti più importanti nell'apprendimento del web design attraverso la scolarizzazione tradizionale e l'assunzione di corsi online contro l'autoapprendimento (ovvero armeggiare sul Web).

(Consigli tecnici e di design)

Gboard arriverà presto ad Android

Gboard arriverà presto ad Android

Sei mesi fa Google ha lanciato Gboard, una tastiera che viene fornita con Google Search Bar, su iOS . Lasciando fuori gli utenti Android al freddo. Questo non sarà più il caso in quanto Google sta incorporando presto Gboard per dispositivi Android .Per la maggior parte, la funzione di Gboard su Android è identica a quella di iOS. G

(Consigli tecnici e di design)