15 tendenze del Web design da tenere d'occhio nel 2012
Finora l'anno 2011 ha portato alcuni sorprendenti cambiamenti nel design e nella tecnologia Internet. Lo sviluppo del Web è diventato molto più facile da imparare, per non parlare delle innumerevoli librerie open source utili per snellire il processo. Eppure sembra che la comunità del design globale sia lontana dal gettare la spugna.
Voglio presentare 15 idee che sono cresciute molto rapidamente nell'ultimo anno. Queste tendenze comprendono tecniche di progettazione grafica e web che probabilmente avranno un ruolo importante nel 2012. Probabilmente hai visto alcune di queste rappresentate in molti dei tuoi siti preferiti online.
Per fortuna i metodi per implementare queste funzionalità stanno diventando più facili da capire e molto più sottili nel codice.
1. Progettazione dell'interfaccia reattiva
L'esperienza dell'utente medio è probabilmente l'aspetto più importante da considerare quando si progetta un sito web. Si desidera che gli elementi della pagina rispondano rapidamente all'input della tastiera / del mouse e si comportino come previsto. Alcuni esempi possono includere menu a comparsa laterali, caselle a discesa e finestre popup.
Includendo famose librerie JavaScript come MooTools e jQuery, è diventato molto più semplice animare queste funzionalità e molto altro ancora. La maggior parte dei browser moderni supportano questo codice e si degradano con garbo quando gli script non sono disponibili. In definitiva, si desidera far sentire l'utente a proprio agio quando interagisce con qualsiasi parte del progetto.
Allo stesso modo dovresti prendere in considerazione l'input della forma e il controllo dei dati. Su molte pagine di registrazione riceverai piccole risposte mentre lavori attraverso ciascuna area di immissione. È possibile automatizzare il controllo di indirizzi e-mail validi, duplicare i nomi utente e persino ricontrollare gli input della password. Ciò farà risparmiare tempo all'utente e fornirà una guida pratica durante la procedura di registrazione.
2. Dispositivi mobili touchscreen
Negli ultimi due anni è diventato evidente che gli smartphone stanno guadagnando supporto anche tra gli appassionati non tecnologici. Ma solo dal 2011 abbiamo visto un'esplosione di siti per dispositivi mobili e modelli specifici per dispositivi mobili.
La popolarità dei dispositivi iPhone e iPad insieme ai telefoni basati su Android significa che i visitatori interagiranno completamente con le tue pagine tramite i comandi touch. Questo deve diventare una considerazione realistica con ogni modello di design. Le tendenze nel design del Web mobile hanno dimostrato che la creazione di un tema mobile completamente separato spesso offre i migliori risultati. In questo modo puoi mantenere tutti i contenuti dinamici sul tuo layout principale mentre servi una versione snella del sito agli utenti mobili.
3. Tonnellate di omaggi!
Chi può dire che onestamente non gode di download gratuiti? I web designer condividono i loro contenuti online da anni, ma solo recentemente è diventata una tendenza molto popolare tra gli artisti digitali. Ci sono state alcune community create appositamente per offrire download gratuiti per web e graphic designer.
Due dei miei preferiti personali sono Download PSD e Designmoo, entrambi aggiornati frequentemente da membri di alta qualità. Inoltre, l'archivio di Hongkiat Freebies ha un sacco di golosità da provare. In qualsiasi epoca prima non è stato letteralmente mai così facile scaricare interfacce web, layout, loghi, banner e praticamente qualsiasi altro tipo di file PSD / AI!
Alcuni download Neat
Qui sotto ci sono solo alcuni fantastici omaggi da verificare all'inizio del 2011. E se pensi che questa lista abbia dei file fantastici, aspetta solo fino al 2012.!
Mini UI Web Set
Dark Mini Music Player
Tag scorrevoli
Dark Photo Slider
Caselle di ricerca
Accedi in / Modulo di accesso
Login modal box
Pulisci il modulo di accesso
Tabelle dei prezzi
Minime barre di caricamento
Allegato Pop-up
4. Standard HTML5 e CSS3
Entrambi questi nuovi archetipi di design hanno accumulato un seguito sempre crescente nel corso del 2011. I web designer di Semantic hanno atteso anni per sfornare i progetti solo CSS che offrono angoli arrotondati e ombre cadenti. Inoltre il W3C ha fatto molti passi avanti nel raccogliere supporto dai browser più popolari.
Posso vedere solo cose buone per il futuro dello sviluppo web HTML5 / CSS3. I progettisti front-end sono spesso trascurati nel campo di oggi, ma hanno una così grande importanza per l'intero processo di composizione. Cerca di non spremerti in nessuna "etichetta" di set basata sulle tecniche che conosci e fai pratica ogni giorno. Offriamo una guida pratica per principianti per la codifica HTML5 / CSS3 se senti il bisogno di aggiornarti.
Attenersi a questi nuovi standard renderà ancora più semplice lo sviluppo in JavaScript e in jQuery. Gli sviluppatori hanno già pubblicato e condiviso online il loro codice di progetto HTML5 / CSS3 e, se le cose continueranno, noteremo sicuramente molto di più in arrivo l'anno prossimo.
5. Nastri e banner
Anche se questa tecnica di progettazione non è esattamente “nuovo” non ha mai veramente rotto il mainstream fino a poco tempo fa. Probabilmente hai visto esempi di nastri d'angolo, barre di navigazione per banner e piccoli badge a nastro. Queste tendenze sono probabilmente esplose a causa del massiccio accumulo di esercitazioni dettagliate che possono essere trovate in tutto tramite Google.
I web designer sono più competenti in questi giorni a lanciare i loro blog per condividere le informazioni. Ora le tecniche semplici possono essere facilmente passate tra i progettisti per duplicare gli effetti più popolari. Ci sono persino PSD gratuiti che puoi scaricare per risparmiarti lo sforzo.
6. Temi Premium WordPress
La versione finale di WordPress 3.0 includeva una serie di funzionalità tanto attese come i tipi di post personalizzati e le immagini di articoli unici. Tuttavia i cambiamenti più profondi che ho visto provengono da negozi di sviluppo di WordPress specializzati in temi WP premium.
Dopo aver acquistato questo tema, il processo di installazione è simile a qualsiasi altro. Ora è possibile includere funzionalità plug-in personalizzate, temi figlio, nuovi menu di amministrazione e un sacco di altre funzionalità direttamente dal tema! WooThemes, ElegantThemes e Rocket Themes sono alcuni marchi che spiccano tra tutti gli altri. La loro qualità è impeccabile e ritengo che i loro sviluppatori vadano al di sopra e al di là di creare i migliori template e i menu di amministrazione più intuitivi.
Nel 2012 posso solo immaginare che WordPress diventi ancora più facile da usare. Ciò significa che saranno pubblicati più temi di alta qualità e saranno lanciati blog più sorprendenti.
7. Riviste online
Parlando di temi WordPress dovremmo anche far emergere il successo rapidamente adottato delle riviste online. Questi siti Web non sono così diversi da qualsiasi blog generico di WordPress a parte la struttura generale e il layout di pagina. È possibile individuare queste riviste più grandi con la semplice presentazione della loro home page e la raccolta di autori che scrivono per il sito.
Man mano che le riviste iniziano a muoversi online, diventeranno una fonte di guadagno per molti scrittori. Concesso un argomento come 'web design' si rivolge a una nicchia più piccola rispetto, ad esempio, ai giochi o all'economia. Ma il fatto che stiamo vedendo più riviste di design online che su carta stampata dimostra che il mondo potrebbe essere diretto negli anni a venire.
8. Easy Drop Shadows
Come aspetto di CSS3 è ora più facile che mai per i progettisti implementare un'ombra esterna in qualsiasi punto della pagina. Gli elementi casella di testo e stile casella sono stati dotati delle rispettive proprietà per rendere nitidi gli effetti di ombreggiatura.
La sintassi text-shadow è molto facile da memorizzare e segue come box-shadow. Ora che le immagini non sono necessarie per il rendering di questi effetti, gli sviluppatori web possono concentrarsi sull'espansione di queste idee di base.
9. Tipografia dinamica
I caratteri sono una parte importante della sfera che comprende la tradizione del web design. I font più importanti tra cui Arial, Helvetica, Georgia e Trebuchet MS sono in circolazione ormai da anni. Sebbene continuino a essere utili per gli standard Web, esistono numerose opzioni alternative per la tipografia avanzata delle pagine Web.
Typekit, ad esempio, richiede solo un paio di righe di codice da includere nella testata del documento. Dopodiché puoi specificare quali nomi di font includere e aggiungerli al tuo CSS. La parte migliore di questa tecnica è che si basa principalmente su JavaScript, quindi all'utente finale non è richiesto di avere i caratteri installati.
Un'altra alternativa è Google Web Fonts che si comporta in modo simile a Typekit. Raccomando ai designer interessati di verificare la query media su font @ face di CSS3, dato che ti viene data molta più creatività. Questo codice può essere utilizzato per importare a .ttf o .otf file di font dal tuo server web e includilo come un font di foglio di stile utilizzabile! Con così tanti sistemi alternativi utilizzati per creare font dinamici, mi aspetto che il 2012 possa vantare un'ondata di innovazione e talento nel design in questo settore.
10. Galleria di immagini Presentazioni
Con la successiva popolarità di jQuery ho individuato sempre più presentazioni di immagini che vengono rilasciate nei layout web. Le gallerie sono perfette per dimostrare un rapido sguardo al contenuto della pagina interna. Questo potrebbe essere un insieme di voci di portfolio, fotografie, post di blog con immagini in primo piano, schermate dimostrative, ecc.
Quando si considerano le numerose animazioni scorrevoli e sbiadite, non è mai stato più semplice creare una presentazione rapida per la propria home page. Sono fiducioso che il 2012 vedrà un aumento di queste tendenze, e non solo tra i designer. Le applicazioni web online e le società di software hanno utilizzato le presentazioni come tutorial guidati per visualizzare schermate e funzionalità uniche.
11. Caselle popup modali
Sento che le scatole modali sono ancora abbastanza nuove per Internet, considerando che sono apparse da anni nei software desktop e nelle app mobili. Lo scopo di una finestra modale è di offrire il contenuto della scatola (come la registrazione dell'utente o il login) in cima alla pagina corrente senza caricarne una nuova.
Molti degli script di galleria di immagini open-source utilizzano un tipo di effetto lightbox in cui lo sfondo sfuma più scuro rispetto alla finestra popup. Mi piace davvero questa funzione ogni volta che la vedo, anche se deve ancora essere adottata da molti. E anche se le scatole modali sono sexy ed eleganti, possono anche essere molto difficili da codificare e funzionare correttamente.
Per ottenere idee per i tuoi siti web, controlla alcune delle community di condivisione di notizie più popolari. Reddit e Digg sono i primi due che vengono in mente in quanto entrambi dispongono di caselle modali login / login con un layout tipico. Inoltre, gli effetti dell'interfaccia utente per Google+ vantano una notevole quantità di funzionalità modali.
12. Elenchi di ispirazione
Le raccolte di articoli della lista sono apparse sin dai primissimi giorni del web design. Mentre ci muovevamo verso il nuovo secolo, i designer iniziarono a utilizzare elenchi HTML ordinati e non ordinati per ospitare i menu di navigazione. Ma oggigiorno le liste possono essere utilizzate per molto di più.
Nella maggior parte dei temi del blog trovo che l'intera barra laterale è piena di elenchi! Per non parlare dei designer che hanno creato fantastici stili CSS per le liste nelle loro voci di articoli. Abbiamo esaminato stili di elenchi ispiratori in un altro post all'inizio di quest'anno che potrebbe darti qualche informazione in più sulla questione. Guardando al futuro mi aspetto alcuni esempi davvero creativi, forse alla pari con il layout personalizzato di Flowapp per compiti e cose da fare.
13. Miniature di immagini generate
Nell'universo web possiamo accettare che il contenuto è il re. Ma la maggior parte dei designer concorderà anche sul fatto che una pagina di testo vuoto diventa noiosa molto rapidamente. Le immagini possono aggiungere quella spezia in più se sai come cospargerle delicatamente. Uno di questi metodi utilizza miniature dinamiche per fornire anteprime per ogni pagina o articolo.
Oggi i blog continuano ad adottare la tendenza dell'immagine in primo piano, quindi perché non applicare le miniature generate anche al tema? Questi spesso richiamano la mia attenzione sul titolo dell'articolo e aiutano a suddividere una pagina piena di link testuali.
Come altro esempio, Dribbble fornisce un elenco completo di miniature di miniature per ogni scatto di design. In un layout simile a una fila di tabelle è super facile intravedere ciascuna miniatura e scorrere per trovare quello che stai cercando. Questa tattica ha dimostrato di attirare l'attenzione dell'intera comunità del design! Er, almeno i membri di Dribbble nella migliore delle ipotesi. Posso solo aspettarmi che il 2012 vedrà un ulteriore sforzo di queste idee basandosi su esempi del passato.
14. Icone sovradimensionate
Questa tendenza unica semi-origina dalla popolarità dei disegni icona di Mac OS X. Poiché i programmatori hanno iniziato a lanciare siti Web per le loro applicazioni Mac, troppo spesso abbiamo visto le enormi dimensioni rappresentate nel marchio. Di conseguenza questa tendenza è stata ripresa anche dagli sviluppatori di iOS e ora riposa comodamente nella cultura del design moderno.
È difficile prevedere come queste tendenze saranno equi man mano che entriamo nel 2012. Da un lato queste icone possono essere goffe e occupare più spazio del necessario. Eppure non siamo nemmeno vicini a colpire una carenza di app iOS / OSX ei progettisti stanno ancora sfornando le specifiche delle icone pixel-perfette. Per non parlare del fatto che i web designer ora includono icone sovradimensionate all'interno di qualsiasi marchio di pagina! È un buon modo per catturare l'attenzione diretta del tuo visitatore e costruire un nome per la tua azienda.
15. Collegamenti ipertestuali esagerati
I link di ancoraggio sono certamente tra i primi cinque elementi più importanti di qualsiasi sito web. Questi hanno ovviamente fatto molta strada dagli anni '90 e le tendenze del design popolari sono cresciute in modo esponenziale. Sembra che stiamo entrando in un'era in cui il design esagerato ha la precedenza.
Dai un'occhiata ad alcuni degli esempi di link di Patterntap per vedere se saltano fuori e attirano la tua attenzione. Ci sono così tante idee incredibili per il design del collegamento ipertestuale, sia negli effetti standard che al passaggio del mouse. Gli angoli arrotondati di CSS3, le ombre di testo e le famiglie di caratteri personalizzati aggiungono ancora più grandi idee al mix! Uno dei miei esempi preferiti è da SimpleBits che utilizza una breve animazione dinamica su ciascuno dei loro permalink di blog entry.
Conclusione
Queste idee sono solo alcune delle tendenze più popolari che ho notato guadagnando la precedenza per tutto il 2011. Il grande web design è sempre incentrato sull'obiettivo e mantiene le intenzioni degli utenti come priorità assoluta. È improbabile che queste filosofie divergeranno nel 2012, ma il modo in cui costruiamo i layout e i dati attuali è sempre in cambiamento. Fateci sapere i vostri pensieri o domande nell'area di discussione dei commenti.
