Tutti i web designer attraversano fasi alle prese con idee creative. È una parte naturale del ciclo di creazione, ma può diventare frustrante in quanto sei bloccato su un progetto di sito web per più di pochi giorni. Non esiste una soluzione valida per tutti. Ma possiamo prendere un momento per analizzare il processo di progettazione per soluzioni migliori.
L'obiettivo principale di qualsiasi sito Web è guidare i visitatori attraverso le tue pagine. Questo è realizzato tramite una navigazione di qualche tipo, più comunemente collegamenti. È possibile costruire barre di tabulazione, banner, elementi di blocco o persino spostare un menu di navigazione lateralmente.
Seguici nella guida in basso mentre guardiamo le tendenze comuni nella progettazione del menu di navigazione web. Sia i designer che gli sviluppatori hanno escogitato trucchi per accelerare il processo di creazione di siti web. E speriamo di fare lo stesso offrendo alcuni suggerimenti unici per la navigazione dell'interfaccia utente.
Pianifica una struttura per pagina web
Prima che inizi il processo di progettazione, dovresti prendere un momento per considerare i molti stili di navigazione dinamica disponibili. Potresti avere sottotitoli a comparsa o a tendina che appaiono da una barra di navigazione o da un blocco fisso, ma in alternativa potresti avere sottotitoli di scorrimento, dissolvenza in apertura o forse non hai nemmeno bisogno di navigazione secondaria. Queste sono tutte idee importanti su cui lavorare prima di immergerti in Photoshop.
Con l'esempio sopra riportato, Fork CMS utilizza una semplice navigazione top-bar che si adatta molto bene. Nulla viene fuori come confuso o difficile da trovare e si ha accesso a tutto il importante informazioni sul sito.
La tua situazione potrebbe essere molto diversa in base al numero di pagine importanti nel tuo sito web. Questo è il motivo per cui suggerisco di disegnare un diagramma per costruire un'idea più solida su come dovrebbe funzionare la navigazione. Questo potrebbe assumere la forma di un diagramma di flusso, in cui si disegna in frecce per puntare verso la pagina successiva in un segmento.
Allegare sottomenu
Ad esempio, la popolare rivista di design Speckyboy presenta un menu a discesa sotto-nav all'interno di ogni categoria. WordPress può configurarlo per impostazione predefinita, ma è comunque necessario utilizzare qualche forma di jQuery. Nel frattempo, il sito di gioco di nicchia Destiny Islands utilizza jQuery per un sottomenu a scorrimento verso il basso per ogni gioco nell'area della barra laterale.
Si può anche notare che la navigazione dell'intestazione è accoppiata con le immagini di sostituzione al passaggio del mouse. Questo piccolo effetto è utile se il layout funziona bene tenendo premuti i pulsanti di collegamento a larghezza fissa. jQuery è un'opzione ma le transizioni CSS3 potrebbero sembrare un'alternativa migliore. Sia CSS3 che JavaScript vantano un supporto a fiocchi nel sistema operativo mobile, ma per i vecchi browser legacy è probabile che vedrete più successo utilizzando un metodo basato su jQuery.
Inoltre, un sottomenu non deve restare all'interno dei formati standard. Penso che il nuovissimo re-design di Smashing Magazine lo dica meglio con il loro piccolo tag cloud. Passa con il mouse sopra l'icona accanto al logo del sito e viene visualizzato un menu di categorie e tag di blog. Tieni a mente queste idee piccole ma raffinate per i tuoi menu a comparsa.
Schede Ajax
Per contenere un numero elevato di collegamenti in un'area più piccola, alcuni contenuti devono essere nascosti per impostazione predefinita. I menu a discesa nascosti sono a senso unico, ma un contenitore con schede è un'altra opzione. E con Ajax puoi estrarre in modo asincrono i dati dal tuo database o da un'altra pagina web con ogni scheda diversa sul div.
I blog WordPress sono famosi per questo tipo di funzionalità. Lo screenshot precedente di Webdesigner Depot si concentra su un widget della barra laterale per estrarre gli articoli più popolari e recenti. Se ritieni che questo metodo si adatti al tuo layout, è un modo per contenere i link in uno spazio molto ridotto.
Se vai grande, vai alla moda!
Quelli di voi che frequentano spesso le gallerie di design sono probabilmente incappati nella pagina di Coda. Utilizzano sia un'area di contenuto a schede per il caricamento di informazioni dinamiche sia un'area di titolo con 3 collegamenti: Scaricare, Acquistare, e Aiuto.
Questo è solo un esempio perfetto di portare la navigazione web al livello successivo. Le scritte grandi e in grassetto spesso attirano l'attenzione se progettate in modo appropriato. E gli effetti al passaggio del mouse aggiunti su ogni virata di area di collegamento sul magico sensazione di tutto il layout. Questo è tutto senza menzionare le deliziose icone pixel-impazzite presenti accanto a ciascun blocco di grandi dimensioni.
Questa è una visualizzazione molto appariscente degli effetti del sito Web e non sarà sempre realistica nell'ambito di ogni progetto. Ma per i link di navigazione con numeri bassi è quasi meglio aumentare di un bel po 'le dimensioni. Se hai solo 3-4 pagine queste dovrebbero essere facilmente trovate e lucidate in modo squisito. Per quanto riguarda le icone, ci sono così tante risorse da verificare che molto probabilmente ti imbatterai in qualcosa di interessante!
Standard HTML5
Il Web ha fatto passi da gigante dal 2001. Negli ultimi 10 anni abbiamo assistito a enormi salti di innovazione tra i tecnici di tutto il mondo. E ora HTML5 ha travolto il mondo del design offrendo una dichiarazione solida e stabile anche per alcuni elementi di pagina contorti.
Uno di questi esempi è il
tag che sta prendendo lentamente il sopravvento sui formati di elenchi non ordinati (o anche sull'accoppiamento dei due insieme). Ecco una grande domanda di Stack Overflow su HTML semantico e utilizzo corretto dell'elemento nav. Come citato dalla pagina delle specifiche?l'elemento nav rappresenta una sezione di una pagina collegamenti ad altre pagine o alle parti all'interno della pagina?. 
Un articolo preferito personale pubblicato all'inizio di quest'anno è intitolato Come HTML5 cambia il modo in cui pensiamo alla navigazione ed esprime molti forti vantaggi per il passaggio alla codifica. La confusione di base deriva da tanti sviluppatori che si sono abituati agli standard XHTML e HTML 4.01.
Conclusione
Questa guida ha esaminato maggiormente la semantica e il markup della creazione di un menu di navigazione dinamico. Tra i nuovi effetti di animazione CSS3 e la libreria di jQuery UI ci sono tonnellate di personalizzazioni che puoi creare. Lo sviluppo web front-end non è mai stato così divertente! Ed è facile trovare grandi comunità di supporto per gli sviluppatori principianti che stanno appena riprendendo il mestiere.
Hai creato qualche sistema di menu dinamico sul tuo sito web? O forse hai trovato alcuni effetti davvero interessanti su altri siti web. Fateci sapere i vostri pensieri e idee nell'area di discussione sottostante.