Accedi o registrati Form Design From Scratch (Day 2)

Avendo completato la nostra progettazione di moduli in Photoshop, ora rivolgeremo la nostra attenzione ai dettagli del processo. Dividiamo il PSD, risolviamo il markup, definiamo l'intero lotto, aggiungiamo alcune sfumature jQuery, quindi terminiamo con alcune validazioni in linea.

C'è molto da fare, quindi cominciamo!


Sezione 4: Il markup HTML

Continuiamo con le nostre forme disponendo il markup HTML basato sul nostro design.


Sezione 5: Affettare il PSD

È giunto il momento di rivolgere nuovamente la nostra attenzione al PSD. Tracceremo gli elementi visivi di cui abbiamo bisogno, quindi iniziamo un po 'di stile nel CSS.


Sezione 6: Modellazione del modulo di accesso

Disegnando la nostra struttura di tabulazione di base, diamo un'occhiata al modulo di accesso.


Sezione 7: Designazione del modulo di iscrizione

Ora tratteremo la nostra forma di registrazione in un modo simile. Aggiungiamo anche qualche magia jQuery al layout delle schede.


Sezione 8: Convalida in linea

Dopo aver completato la compilazione delle nostre forme, concentriamoci ora sulla funzionalità. Applicheremo alcune validazioni in linea e lucideremo gli ultimi ritocchi.


Ulteriori letture e riferimenti utili

  • Modelli di progettazione di moduli Web di Smashing Magazine
  • Webdesigntuts + Introduzione alla teoria del colore per i web designer
  • Sei revisioni Uno sguardo alla teoria del colore nel Web design
  • dezinerfolio.com30 Icone vettoriali gratis
  • Nettuts + Crea un modulo di contatto con HTML5 pulito
  • Dive Into HTML5 Una forma di follia
  • Una convalida del modulo di pensiero in avanti a lista
  • Nets + 8 espressioni regolari che dovresti sapere
  • Pattern di input HTML5
  • CSS Tricks Force Element per auto-cancellare i suoi bambini
  • Costruttore di stack di font Style Code
  • FamFamFam Silk Icons