Un caso per la codifica dei tuoi wireframe

Lavorare come designer ogni giorno può essere laborioso. Fortunatamente, il campo si è espanso e così il processo è diventato più semplice. Molti strumenti e risorse gratuiti sono disponibili.

I wireframe portano eleganza per progettare modelli. Sono la struttura di base di un sito Web, con colori e miglioramenti rimossi.

Sono utilizzati per visualizzare i concetti di progettazione con solo gli elementi essenziali, e possono fornire una prospettiva utile su qualsiasi progetto.

La maggior parte dei wireframe viene creata in suite software come Adobe Photoshop e Fireworks, ma alcuni siti Web consentono di creare immagini wireframe direttamente nel browser.

In questo post andremo a codificare un'immagine di wireframe di base in HTML e CSS e vedere come può avvantaggiare il processo creativo.

Perché preoccuparsi?

Perché trascorrere del tempo a disegnare la struttura di un sito web? In alcuni casi, potrebbe non essere necessario, ma può essere d'aiuto quando sei bloccato in un solco o stai lottando per vedere il quadro generale.

Può avvantaggiare sia i progettisti che i clienti. Nel lavoro retribuito, sei responsabile di gradire il cliente. Mostrare la struttura di base del loro sito Web che presto sarà progettato può dare sollievo ai clienti e un senso di controllo sull'intero processo.

Ma se il design è molto semplice o ha una struttura semplice, la creazione di un wireframe potrebbe non valerne la pena; prendere in giro l'intera cosa in Photoshop, con pulsanti e colori, potrebbe essere altrettanto veloce.

Decidere quali passi intraprendere richiede tempo e pensiero critico. Dopo tutto, un wireframe è semplicemente uno strumento. È sottovalutato da molti web designer ma sorprendentemente utile una volta capito.

Prototipazione di wireframe nel codice

Per anni, il software di progettazione Adobe è stata la suite principale per la creazione di wireframe, ma il web ha subito cambiamenti sostanziali e si sta ancora evolvendo.

L'aumento degli standard di codifica e aumento in Documentazione HTML5 sono grandi passi verso una rete comune. Ora, la codifica di un wireframe di base in HTML e CSS non è più un lavoro che affrontare il lavoro in Fireworks.

Con i wireframe è possibile attaccare un progetto frontalmente da più angolazioni. È anche possibile verificare la compatibilità con le tecniche e i browser CSS2 e CSS3. Le cose non devono essere complesse all'inizio; un wireframe funge semplicemente da solida base per iniziare la codifica.

La condivisione di contenuti diventa anche più facile con un wireframe. È possibile ospitare tutti i file necessari su qualsiasi server Web e configurare una directory dimostrativa e inoltrare aggiornamenti in tempo reale ai clienti e ai sorveglianti del progetto. Anche apportare modifiche, come ritocchi veloci ai margini e larghezze nel CSS del documento, è semplice.

Standardizza il codice per il lungo raggio

I wireframe risparmiano tempo nel processo di sviluppo. Se gli stili CSS per i tuoi elementi di base sono già stati scritti, il resto è solo riempitivo (riempitivo importante, intendiamoci).

Iniziare correttamente, con il tipo di documento HTML corretto e la struttura della directory. I tipi di documento non sono troppo diversi l'uno dall'altro. Puoi leggere su di loro sul Pagina delle specifiche W3C . Non importa molto nel vecchio modello World Wide Web, ma HTML5 è completo e consente al tuo sito web di crescere.

Devi testare la compatibilità sul maggior numero possibile di sistemi operativi e browser, e la fase di prototipazione wireframe è il momento perfetto per farlo, perché sei già concentrato sull'organizzazione del layout.

Questo è anche un buon momento per lavorare su un modello ottimizzato per i dispositivi mobili. Man mano che la struttura cambia, dovresti essere in grado di incorporare idee e manipolare il codice del documento. Lo sviluppo diventa più facile perché c'è meno codice per ingombrare il tuo cellulare e stili personalizzati.

Iniziare la struttura del documento Wireframe

Il modo migliore per iniziare è con una lavagna vuota, perché ti offre la massima creatività. Gli elementi ovvi da includere nel codice (come in qualsiasi altro documento web) lo sono html , head e body .

Questo è lo scheletro. Avrai bisogno di alcuni altri elementi per far sì che il wireframe abbia un bell'aspetto. Il div (o divisione) è notevole. Questo è l'elemento usato per inscatolare alcune aree della pagina, come il logo o la casella di ricerca.

Divs sono gli elementi costitutivi dei prototipi di wireframe HTML5. Tutto e tutto possono essere racchiusi in a div e lo stile è un gioco da ragazzi quando si applicano classi e ID agli elementi. Gran parte del tuo codice principale sarà suddiviso da divs perché sono gli elementi di blocco di base.

Con le nuove specifiche HTML5, un elemento chiamato nav è stato introdotto Questo può essere combinato con un elenco non ordinato e alcune proprietà CSS per creare e definire l'area di navigazione principale del tuo sito. Di seguito è riportato un semplice esempio di come è possibile strutturare il tuo nav :

Lavorando con header e footer Elementi

Nell'esempio sopra, noterai che ho usato a div con un ID di header per separare la mia rotta di navigazione. Questo è perfettamente accettabile e nulla è sbagliato con il codice sopra. HTML5 ci offre altre opzioni, però.

Il header l'elemento nelle nuove specifiche HTML5 ti consente di definire ulteriormente la tua struttura, che è utile soprattutto per crawler e screen reader, che separano una porzione di "titolo" del contenuto. Non dovrebbe fare alcuna differenza per i tuoi utenti, e mantiene il tuo codice in forma e mostra che capisci davvero di cosa stai parlando.

Un altro elemento interessante che è stato aggiunto è footer . Stessa idea: usa questo elemento al posto di a div per separare il contenuto del footer. Generalmente, i piè di pagina sono fuori mano e contengono informazioni di base sul sito Web o sulla società.

È possibile aggiungere collegamenti al piè di pagina e utilizzare a nav elemento per definire alcuni di loro, ma sarebbe sconsiderato. Il nav elemento specifica l'area di navigazione principale, quindi aggiungerla al piè di pagina o in qualsiasi altro punto sarebbe ridondante.

In questo scenario, utilizzando il footer elemento e separare i link di navigazione come una lista non ordinata è la cosa migliore. È possibile utilizzare un piè di pagina con colonne, con un numero di colonne di collegamenti. Questi potrebbero essere separati div elementi visualizzati l'uno accanto all'altro, tutti avvolti nel piè di pagina principale.

Tecniche CSS per lo styling di wireframe

Se comprendi l'HTML e hai lavorato con il web per un po ', probabilmente conosci alcuni CSS di base. Molte delle nuove funzionalità di CSS3 sono per aggiungere fantasienti angoli arrotondati e ombreggiature al testo.

Non intendo suggerire che lo stile CSS non sia importante, ma il layout e il posizionamento di base sono ciò che rende la struttura del tuo sito web definitiva. Con i CSS, definisci larghezza, margine e spaziatura. Queste sono le proprietà di base della maggior parte degli elementi Web e rappresentano l'ultimo passaggio per la creazione di un wireframe davvero eccezionale.

Se sei incuriosito dalle nuove proprietà e selettori di CSS3, controlla i Depot di Webdesigner raccolta di miglioramenti . Contiene guide su tutto il Web relative alle nuove funzionalità in CSS3.

Aggiunta clearfix agli stili

Se non conosci la tecnica del clearfix, fallo alcune ricerche . È una classe popolare che vorresti aggiungere a div contenitore che contiene due o più blocchi mobili.

Se non hai mai sentito parlare di clearfix, potrebbe sembrare confuso, ma il concetto è semplice. Pensa a un contenitore div quello ha due div s al suo interno, entrambi fluttuavano a sinistra. Per impostazione predefinita, la maggior parte dei browser renderebbe le due colonne direttamente in contatto l'una con l'altra e il contenuto div espandere la pagina per adattarla a qualsiasi colonna sia la più lunga.

Aggiungendo a clearfix classe al tuo contenitore, entrambe le colonne si adatteranno felicemente all'interno del contenitore div , che si espande abbastanza da contenere entrambi gli elementi. Questo risolve molti problemi nella prototipazione wireframe, in particolare con layout a due colonne (cioè il contenuto principale e la barra laterale). Questo metodo funzionerà anche per layout a tre e persino a quattro colonne, ogni colonna dovrebbe solo adattarsi a uno spazio più piccolo.

Visualizzazione di CSS: mantenimento degli stili esterni

Cosa fare con il posizionamento CSS è un'altra decisione importante. I web designer e gli sviluppatori professionisti suggeriscono semplicemente di mantenere un gruppo indipendente .css file, separato dal tuo codice HTML.

In questo modo, la struttura è in un documento e il layout e il design sono in un altro. Entrambi sono ugualmente importanti per i wireframe, ma svolgono compiti distinti.

Tutto il tuo codice HTML è strettamente strutturale. Puoi inserire collegamenti all'interno di paragrafi all'interno del contenitore div s all'interno di altri contenitori, e così via. Lo stile controlla la dimensione, la spaziatura, i margini e le lettere di paragrafi e collegamenti e il wireframe definisce la larghezza dei contenitori e il loro posizionamento sulla pagina.

Gli elementi della pagina forniscono ulteriori esempi. Dovresti scrivere il codice div contenitori per i contenuti e le barre laterali, ma lo si dovrebbe definire e posizionarli usando i CSS. Per un designer, capire come separare contenuti e stile è la chiave per padroneggiare i wireframe.

Implementare segnaposto di elementi pagina dinamica

Fantastici effetti jQuery e elementi web Ajax-ified sembrano essere di gran moda. Le tendenze crescono e quasi tutti i siti web più popolari presentano alcuni contenuti dinamici. È importante considerare. Se completano il design, perché non sono presenti blocchi nel wireframe?

Lo sviluppo di un intero sistema di back-end per una casella di accesso dinamica potrebbe non essere pratico, ma notare che le librerie JavaScript di cui avrai bisogno sono un ottimo inizio. È inoltre possibile codificare gli stili che strutturano questa casella e impostare le cose in un secondo momento, quando si desidera aggiungere colore e dettagli.

Questi temi possono essere applicati su molti elementi dell'interfaccia. Puoi utilizzare suggerimenti di ricerca simili a quelli di Google o lasciare note nel codice per implementare una news dinamica o una casella di feed Twitter, che renderà il tuo wireframe dinamico e fornirà un modo elegante per rappresentare un oggetto a stato solido al posto del contenuto dinamico . Durante la fase di prototipazione, questo è tutto ciò che ti serve comunque.

Errori comuni di sviluppo del wireframe

È difficile sbagliare quando inizi a codificare la struttura di base di un sito Web, ma tieni a mente alcuni dettagli.

Ricorda che lo scopo di un wireframe è di presentare un framework senza molti dettagli. È utile durante le fasi iniziali della pianificazione degli elementi della pagina; puoi approfondire il tuo sito web e vedere il quadro generale.

Mantieni le cose semplici e in ordine. Trascurare questo è un errore comune e paralizzerà la tua capacità di rispettare le scadenze. Un wireframe non ha bisogno di essere praticamente perfetto; dovrebbe essere un abbozzo del sito web. Anche un wireframe rigorosamente HTML e CSS dovrebbe consistere solo in profili di elementi di pagina.

Evita le deviazioni concentrandoti sui tuoi obiettivi principali. Ricorda perché hai iniziato il processo con un wireframe in primo luogo!

I wireframe possono anche risolvere molti problemi che affliggono il processo di progettazione. Codificare un prototipo in HTML e CSS è il modo migliore per ottenere un vantaggio su un progetto web, grande o piccolo. È un modo semplice ed efficace per dare forma alle tue idee.

UN tonnellate di articoli sul web si riferiscono al processo di wireframing. Ho coperto il codice e lo sviluppo delle cose, ma per saperne di più su wireframing, continua a leggere. I consigli di progettazione sono là fuori; devi solo trovarli!

Questo post è stato scritto esclusivamente per il Webdesigner Depot di Jake Rocheleau , appassionato web designer e appassionato di social media. Jake ama leggere e scrivere sulle ultime tendenze di Internet digitale e sul networking nella comunità del design. Controllalo su Twitter @jakerocheleau per ulteriori informazioni sul suo lavoro.

Quali sono le tue esperienze con il processo wireframe? Lavori prima in codice o in qualche altro tipo di software? Quali pensi che siano alcuni vantaggi per la prototipazione in codice prima?