Si può solo immaginare quanto sia stato difficile riprendere il web design quando tutto sembrava così nuovo - durante i giorni di Netscape Navigator e Microsoft FrontPage. Guardando indietro, sembra un tempo così arcaico nella storia del web design. Era quasi impossibile progettare qualcosa di creatività suprema e intelligente. Allora, sei stato visto come creativo se avevi uno sfondo tremendo o barre di scorrimento colorate.

Non c'era davvero un sacco di flessibilità quando si trattava del nocciolo duro del design. Molti degli schemi erano gli stessi e imitavano ciò che si vedeva su riviste e giornali. Voglio solo pensarci: non molto tempo fa siamo stati finalmente in grado di trovare un modo per usare i caratteri decorativi online. In precedenza, era tutto Arial, tutti i Verdana e tutti i tempi New Roman - nel 2012, puoi immaginare di vivere quella vita?

I tavoli erano la norma e quelli non erano troppo flessibili. Parlando di flessibilità, come mai abbiamo vissuto senza reattività? Se volevi progettare un sito web un po 'di tempo fa, sei stato praticamente incastrato per lavorare con quello che avevi. Nessuno si è lamentato allora, ma grazie al cielo per la tecnologia progressiva.

Adesso…

Avanziamo rapidamente fino ad ora e possiamo progettare praticamente tutto nel modo in cui vogliamo, in qualsiasi cosa vogliamo. Questi tipi di cose non dovrebbero essere dati per scontati, ma come nuove generazioni di progettisti e sviluppatori entrano in questo regno, lo è praticamente. Voglio dire, solo pochi mesi fa, siamo stati finalmente in grado di utilizzare i fogli di stile per creare angoli arrotondati: quanto velocemente dimentichiamo?

I progressi nel web design possono essere contribuiti alla continua evoluzione di diversi linguaggi di programmazione. Non puoi avere un ottimo web design senza un grande sviluppo web (e viceversa). E si potrebbe pensare, le cose potrebbero essere diventate più complicate per quanto riguarda lo sviluppo, ma è abbastanza ovvio che le cose sono diventate più facili. Dai un'occhiata, ad esempio, a HTML4 rispetto a HTML5.

Uno dei maggiori sviluppi in, bene, sviluppo e design è stato l'utilizzo di jQuery. Probabilmente è una delle librerie JavaScript più facili da imparare e codificare, oltre a fare cose abbastanza belle con. Se stai progettando liberamente e / o desideri alcune interazioni davvero fantastiche tra il tuo design e il tuo pubblico, probabilmente utilizzerai jQuery.

I plugin

jQuery non si limita a presentare il tuo attuale design, ma rende più fluide le esperienze degli utenti. Quando i siti web devono essere fatti per accogliere il tuo pubblico e renderlo facile per loro di muoversi, questo è importante. Il design è importante anche se stai utilizzando una grande quantità di creatività con il tuo design. Fondamentalmente, non ci dovrebbero essere limiti quando si tratta di creare siti Web, e jQuery è estremamente utile per assicurarsi di non essere intrappolati in scatole. Quindi cosa può fare jQuery per te? Di seguito sono riportati alcuni ottimi plugin che ti consentono di essere il più creativo e fresco possibile nello sviluppo web.

jQuery grid mobile

Alcuni designer amano aprire il programma di loro scelta e progettare ciò che vogliono senza scrupoli. Ci sono altri a cui piace avere un metodo per la loro follia. Gli standard di progettazione Web suggeriscono che dovremmo utilizzare le griglie per aiutarci a progettare siti web grandiosi ed efficaci, specialmente se state progettando un blog o un sito di notizie. Una seconda parte di questa idea è che la griglia dovrebbe essere flessibile e reattiva. Questo plugin consente di creare più colonne con (e senza) reattività.

ArcText.js

Solo un paio d'anni fa, se volevi avere dei caratteri davvero fantastici e degli effetti tipografici sul tuo sito web, dovevi aprire il tuo programma di progettazione desiderato e creare un grafico con tutto ciò che volevi. È stata una tecnica accettabile fino a quando le persone non si sono rese conto che non era il più flessibile, e non si sono comportati bene con l'ottimizzazione dei motori di ricerca. Con i progressi e la tecnologia, tuttavia, siamo diventati in grado di utilizzare i caratteri decorativi online. Non solo, ma con questo plug-in, siamo in grado di aggiungere uno stile che altrimenti non sarebbe disponibile al di fuori di Photoshop.

Fancy Moves

Una tendenza comune nel moderno web design è la capacità di far muovere le cose. È quasi impossibile visitare un sito Web e assistere a immagini statiche: quasi tutti utilizzano un dispositivo di scorrimento dell'immagine in una forma o in una moda. Molti di questi cursori sono automatici e cambiano le immagini in base a uno specifico intervallo di tempo. Non c'è niente di sbagliato in questo, ma come puoi prendere un concetto del genere e renderlo più grande per l'esperienza dell'utente? Questo plugin di Fancy Movies sembra averlo capito permettendo agli spettatori di controllare la diapositiva, non solo facendo clic sulla freccia successiva, ma toccando comodamente i tasti freccia sulle loro tastiere.

FitText

La tipografia nel design è estremamente importante. I web designer hanno bisogno della possibilità di usare qualsiasi carattere che desiderano e quindi metterlo insieme in qualsiasi modo desideri. Attraverso cose come Cufon e CSS, è possibile, ma di grande importanza ultimamente è la reattività di un sito web. Se il tuo design non può essere flessibile, è quasi inutile e una delle parti principali dei siti che deve essere reattiva è la tipografia. FitText consente alle intestazioni e al testo di riempimento di essere ottimali, indipendentemente dalle dimensioni della finestra o dal dispositivo utilizzato per controllare il tuo sito web.

Zoom al passaggio del mouse

Il modo in cui alcuni elementi reagiscono alle interazioni su un sito può avere un impatto (negativo e positivo) sul modo in cui gli spettatori reagiscono ad esso. Una semplice interazione che viene sempre riprodotta, è la funzione hover. Quando metti il ​​mouse su un'immagine o anche su un link, è quasi normale che quell'elemento faccia qualcosa; e migliore è la reazione, migliori saranno le persone che risponderanno. Questo plugin è per le immagini che, quando si librano, ingrandiscono o ridimensionano e forniscono anche informazioni aggiuntive. Se usato correttamente questo può essere estremamente efficace. Per non parlare, il design andrà bene.

jRumble

Quello che i progettisti devono capire è che, quando realizziamo siti web, abbiamo molto potere. Possiamo far vedere alle persone ciò che vogliamo che loro vedano e non vedere le cose che non vogliamo che loro vedano. I principi di progettazione di base, come l'equilibrio e la gerarchia, possono aiutare a influenzare il focus e l'interesse degli spettatori. Ci sono modi sottili per farlo. jRumble è più appassionato di far vedere e notare le cose in un modo più forte e sfacciato. È un plugin divertente e se usato con parsimonia può essere efficace per qualsiasi scopo. Ricorda solo di non farlo.

jQSlickWrap

Creare layout per il tuo testo può essere una cosa difficile. Non si tratta solo dei tipi di carattere che scegli, ma anche del modo in cui lo presenti che lo rende efficace. Se stai progettando un sito che prevede di avere grossi blocchi di testo, impostarlo in modo errato può far sì che i tuoi lettori siano totalmente disinteressati a qualsiasi cosa tu stia dicendo. Molti designer hanno problemi quando cercano di far interagire bene immagini e testo tra loro. Se non sei estremamente interessato ai blocchi di testo o ritieni che desideri che il tuo testo e le immagini interagiscano di più, questo potrebbe essere il plug-in per te. Niente più letture giornalistiche, ma più libertà creativa.

jQuery Offset Animation

Come precedentemente affermato, i siti web statici non sono così comuni oggi come potrebbero essere stati negli anni precedenti. Molte cose hanno contribuito a contribuire alla creazione di siti web dinamici che si muovono e interagiscono bene con i loro spettatori. Una cosa aggiunta da jQuery a quella conversazione è la possibilità di creare animazioni e transizioni fantastiche da elemento a elemento. Questo plugin crea una transizione scorrevole o scorrevole per spostarsi da un elemento a quello successivo. Rende un sito Web molto divertente.

Scorrere-O-Rama

Con un nome come "Scroll-O-Rama", potresti passare questo plugin, ma ti consiglio di non farlo. Per quanto sia divertente e fantastico come questo plugin, credo che possa essere reso popolare nella nicchia alla moda dei siti web a pagina singola. Mentre scorri i siti web di una sola pagina, ti aspetti che succeda qualcosa. Questo plug-in consente praticamente a titoli e testo di ballare mentre lo passi. È un altro plug-in che viene utilizzato principalmente per scopi decorativi, ma se si riesce a cospargerlo del tuo sito e usarlo nei posti giusti, puoi giocare a questo plugin per un punto di forza.

jQuery Shadow Plugin

Per aggiungere un po 'di profondità alle immagini o agli elementi a volte, ai progettisti piace usare le ombre esterne. Ci sono due modi popolari in cui i designer creano ombre e cioè attraverso i CSS o creando l'ombra nel loro programma di progettazione e in genere salvandolo come una sorta di file trasparente. La maggior parte delle volte questo funziona e talvolta ci possono essere alcuni problemi, ma ciò che è bello di questo plugin è che ti permette di aggiungere diversi tipi di ombre a qualsiasi elemento che ti piace senza doverli progettare, e funziona cross-browser.

Slitslide

Le buone transizioni nei siti web rendono un'esperienza divertente e allettante. Ti abbiamo già fornito un ottimo plugin per le transizioni da elemento a elemento, ma questo plugin è ottimo per le transizioni da pagina a pagina. Con questo plug-in Slitslide, la pagina si divide, fa scorrere e introduce nuove pagine direttamente dietro di esso. Questo è uno strumento estremamente dinamico che aggiunge entusiasmo e sapore ai siti che potrebbero aver bisogno di quel livello extra.

Tipped

I tooltip sono un elemento utilizzato per molte ragioni; per attirare l'attenzione, aggiungere informazioni o qualsiasi altra cosa si possa inserire in essa. Agisce molto come un effetto hover, dove se usato correttamente può essere estremamente efficace. Ci sono un sacco di plugin jQuery che si occupano dello sviluppo e dell'utilizzo dei tooltip. Tipped è un plugin che funziona e ha molte funzionalità, la maggior parte delle quali sono personalizzabili da HTML5 e CSS, il che rende la creazione facile e semplice.

Tubolare

Siamo tutti d'accordo sul fatto che uno sfondo sfavillante non è dove la creatività si trova. Tuttavia, ci sono altre cose che possono essere aggiunte al tuo background per dare al tuo sito un po 'di scintilla. Potresti semplicemente essere rigorosamente di design e vuoi un modello ben congegnato, ma potresti volere qualcosa di un po 'più dinamico. Tubular è un plug-in che ti consente di utilizzare i video di YouTube come sfondo. Pensa alle possibilità divertenti e creative che potresti ottenere con questo.

jmpress

Alcuni siti Web o sottositi sono solo intorno a darci un po 'di informazioni. Potrebbero non esserci tonnellate di copie e potrebbero non esserci tonnellate di fotografie, ma è comunque un'informazione importante. In molti incontri con questi volumi e tipi di informazioni, siamo abituati a metterli e presentarli in modalità tipo presentazione. Questo plugin jQuery ricorda quello, mentre si utilizza uno sfondo infinito con alcune grandi animazioni.

jQuery Knob

Viviamo in un momento molto visivo, in cui numeri e informazioni sono più facili da vedere di quanto non si pensi davvero. Alcuni di noi preferiscono persino vedere le nostre informazioni prima di comprenderle davvero e usarle. Se hai qualche informazione da offrire, questo plugin è ottimo per aiutare a visualizzare i numeri. Si tratta di un grafico di selezione / cerchio interattivo che funziona e consente agli spettatori di modificare anche le informazioni.

Hover miniatura 3D

Abbiamo già parlato dell'effetto "hover" dell'immagine e di come può essere molto efficace per i siti web. Bene, e se volessi un pizzico in più per le tue immagini? Questo plugin ti offre un effetto "hover" dell'immagine che rivela le informazioni con un tocco di torsione 3D.

blur.js

Un buon design può davvero fare la differenza tra un sito web buono e uno cattivo. Spesso, la decisione non riguarda il design nel suo insieme, ma i piccoli dettagli; è per questo che usiamo tooltip e testi fantastici. Questo plugin aggiunge un po 'più di dettagli al tuo sito, se lo desideri. Questo plugin crea elementi sfocati trasparenti psuedo su altri elementi. Questo è un plugin decorativo, ma può essere usato per trarne beneficio.

Conclusione

Ci sono molti modi per migliorare il tuo web design per renderlo fresco e attraente per i tuoi visitatori. Tieni presente che vuoi realizzare qualcosa che non sia solo creativo, ma creativo ed efficace. Gli strumenti che abbiamo ora sono fantastici e ciò che è ancora meglio è che la tecnologia è ancora in aumento e ci aspettano cose migliori per la creazione di siti web.