The State of Web Design Trends 2011 Annual Edition

Il 2010 è stato un anno incredibilmente verdeggiante per i web designer. Il mobile ha colpito il mainstream; La tipografia Web ha raggiunto nuovi livelli di sofisticazione; Le nuove tecniche di codifica hanno notevolmente migliorato la nostra capacità di essere creativi con il design (senza compromettere la stabilità). Tutto sommato, è stato un anno che si è mosso velocemente, anche per gli standard del web, quindi analizziamo il nostro primo post annuale che copre lo stato del web design dal 2010 al 2011.


La morte del piega

La tradizionale "piega" (la linea immaginaria su uno schermo che designa il contenuto visibile prima che lo spettatore debba scorrere) divenne vago, insignificante e quasi irrilevante nel 2010.

Perché? Perché lo "schermo" tradizionale che le persone guardano attraverso il web ha subito un'esplosione di varietà ... non possiamo più aspettarci che i web-surfer si trovino su qualcosa di simile a un monitor da 19 "con una risoluzione tra 1024x768 e 1280x700. tutte le forme e le dimensioni, da iPhone (e telefoni più piccoli) a HDTV da 60 ". Non è solo la risoluzione che può variare selvaggiamente; lo stesso aspetto di uno schermo (anche sullo stesso dispositivo come l'iPhone) può cambiare con il movimento del polso. Certo, i web designer saranno sempre consigliati di mantenere i messaggi più importanti di un sito vicino alla cima, ma con così tanti nuovi modi per i navigatori del web di visualizzare il web, non c'è più un'altezza definita per cui il contenuto deve essere sopra.

Discuteremo questo argomento in modo molto più dettagliato questo mese, quindi iscriviti (è gratuito) per rimanere sintonizzati :)


Siti mobili

I siti sono stati progettati per gli scenari mobili sin dal lancio dei dispositivi mobili ... ma il 2010 ha visto un'enorme spinta verso interi sotto-siti progettati specificamente per essere visualizzati su schermi piccoli e portatili. Puoi ringraziare l'iPhone per aver iniziato questa tendenza, ma l'ondata di siti "mobificati" si sta diffondendo a macchia d'olio ... e arriverà la stessa ora l'anno prossimo, sono sicuro che ti sarà difficile trovare un importante sito di pubblicazione senza sito compagno mobile.

Ciò che è chiaro sugli schermi mobili è che costringe i designer a diventare creativi con una quantità relativamente piccola di proprietà immobiliari. Riuscire nell'ambiente mobile non è difficile se si tiene a mente alcune regole: i messaggi devono essere trasmessi più rapidamente e con maggiore efficienza; I collegamenti devono essere progettati per un ambiente touchscreen; e il testo deve diventare leggibile (o almeno efficacemente zoomabile). Ecco alcuni esempi di siti per dispositivi mobili:

Puoi leggere molto di più sulla progettazione mobile sul nostro sito gemello: Mobile.tutsplus.com!

SubTrend: Siti compressi

Proprio come il 2010 ha visto un'esplosione di progetti di siti per dispositivi mobili, ci si può aspettare che, man mano che i consumatori acquistano i tablet più spesso, i siti Web principali seguiranno l'esempio creando siti (e app) progettati specificamente per un ambiente touchscreen di medie dimensioni.


Un'esplosione tipografica

Va bene, immagino che potresti affermare che "la tipografia esploderà" ogni anno ... ma il 2010 ha visto alcune importanti modifiche alla tecnologia sottostante che rendono legittimo questo reclamo. In primo luogo, l'enorme quantità di crescita della tecnologia di sostituzione dei font nel corso dell'ultimo anno e l'adozione di massa di "caratteri come servizi" in cui aziende di terze parti ospitano tipi di carattere (e licenze) che i progettisti possono utilizzare negli ambienti di sviluppo live. Potresti anche dire che i designer stanno diventando molto più audaci anche con typogrpahy ... con sempre più disegni che escono di recente che sfocano nella linea tra print-4design e web design.

Puoi leggere ulteriori informazioni su come navigare nella vasta gamma di queste fantastiche nuove soluzioni tipografiche qui. Vediamo alcuni esempi (alcuni usano la sostituzione dei font, altri usano altri metodi):

SubTrend: Print Design Inspired Sites

Questo è stato di gran moda nel 2009 - 2010, ma la "rivoluzione della stampa" è viva e vegeta sul web, e sempre più siti sono progettati per imitare grandi progetti di stampa, come riviste, poster, volantini e altro.


Influenza dell'interfaccia utente dell'applicazione desktop

Se fossi un uomo delle scommesse nel 2009, avrei messo tutti i miei soldi in app ... app per iPhone, app per Android, app per Apple, app per PC, app per il web ... l'ambiente del software sembra essersi impazzito nell'ultimo anno o due . Tutto questo entusiasmo per la creazione di applicazioni è sfociato nel lessico di stile del web design in un modo interessante: dove una volta il web sembrava, come un sito web, al giorno d'oggi può spesso sembrare più simile a un'applicazione. Tutto da finestre modali, menu contestuali, pulsanti ispirati al sistema operativo e altro ancora vengono introdotti nell'ambiente del Web design in modi nuovi ed entusiasmanti ... il risultato finale: siti più intuitivi e naturali.


Layout di griglia intensiva

I layout a griglia non sono nuovi al 2010 (o addirittura al 1980), ma i web designer stanno iniziando a staccarsi dai tradizionali layout web (intestazione, colonna di contenuti, barra laterale, piè di pagina) a favore di layout più esclusivi, basati sulla rete. Ciò che è iniziato con il movimento 960.gs si è rapidamente diffuso ai sistemi a griglia che possono effettivamente adattarsi alla risoluzione dello schermo degli spettatori.


Immagini massive

Ecco un'altra tendenza che sta accadendo per molto più di questo solo l'anno scorso. Le immagini di grandi dimensioni erano un tempo tabù per i web designer, ma grazie a una migliore ottimizzazione dell'immagine, connessioni Internet più veloci e metodi di caricamento più intelligenti, i progettisti possono guadagnare molto in alcuni siti spingendo le dimensioni dell'immagine al massimo.

Più che semplici "grandi immagini", stiamo iniziando a vedere più trend verso i siti che utilizzano vasti sfondi illustrativi (e fotografici) che fanno parte dell'esperienza attuale in quanto sono semplicemente un'opera d'arte aggiuntiva.


Integrazione di Script Immersive (jQuery Sliders, ecc.)

I plug-in codificati erano un ripensamento nella maggior parte dei progetti web ... finiresti un mockup, quindi sostituirai un'immagine con un cursore se riuscissi a trovare un ottimo plugin per questo. Oggigiorno, interi progetti possono essere basati su script e plugin che fanno più di "aggiungere qualcosa" a un progetto ... possono definire l'intera esperienza del sito web.

Qui ci sono solo un paio di esempi di siti che non aggiungono solo l'interattività dello script, ne fanno la base del sito:

Puoi leggere molto di più su jQuery e altri trucchi di integrazione di script sul nostro sito gemello: Net.tutsplus.com!


CSS3 colpisce il mainstream

Se avessi un centesimo per ogni articolo su CSS3 che ho visto nel 2010, starei nuotando in un pool di loro. Mentre l'adozione di massa di CSS3 è ancora un po 'lontana (ecco un comodo collegamento per vedere quali browser hanno adottato le parti del CSS3), i progettisti non hanno esitato a iniziare ad utilizzare alcune delle fantastiche nuove funzionalità. Tutto da angoli arrotondati, ombre di riquadri, effetti di bagliore, animazioni CSS3, font-face e altro ancora hanno iniziato a comparire in tutti i progetti. ecco solo una manciata di esempi:

Puoi leggere molto di più sui trucchi CSS3 sul nostro sito gemello: Net.tutsplus.com!


Trama, Texture, Trama

Le trame non sono nuove, ma come ogni anno lo vediamo integrato in modi nuovi e interessanti. Il 2010 ha visto molta della trama del "rumore sottile", ma più di ogni altra cosa, stiamo iniziando a entrare in una fase di stile in cui più disegni stanno iniziando a sentirsi "tangibile". Questo non significa necessariamente che vengano utilizzate trame pesanti e pesanti, ma stiamo vedendo trame più sottili e ben progettate che si ripetono naturalmente.


Disegni guidati da infografica

Sono sempre stato un grande fan delle infografiche, quindi è bello che stiamo iniziando a vederle essere integrate nel web design come qualcosa di più che semplici allegati. Penso che ci siano molte opportunità per nuovi ed entusiasmanti modi di integrazione dei siti di infografica, quindi tieni d'occhio questi disegni nel 2011.


Siti di pagine singole


Ambienti 3D

Questa è più una novità che una tendenza ... I siti basati su 3D sono divertenti da usare, ma non sono completamente accessibili da alcuni browser e dispositivi. Detto questo, ci sono alcune cose divertenti che accadono nel modo di ambienti tridimensionali, quindi vale la pena provarlo, anche se non lo vedrai sul tuo iPhone in qualsiasi momento presto;)


Social Media Convergence

L'ultima tendenza che ho intenzione di menzionare non è quella che richiede molto in termini di screenshot ... principalmente perché il cambiamento è più strategia piuttosto che sostanza. Mentre questa tendenza sta accadendo da anni, le cose sembrano andare in testa al momento ... e il destino del futuro di Internet sarà deciso.

Quello di cui sto parlando è "convergenza dei social media", o meglio, il modello di marchi e imprese che concentra i propri sforzi sui siti di social media (piuttosto che sui propri siti indipendenti). Invece dei singoli domini, stiamo iniziando a vedere sempre più aziende passare a strategie basate su siti come Facebook o che stanno per lo meno integrando funzionalità social in un modo che dipende al 100% dai siti di social media.

... invece di una rete composta da milioni di siti diversi e unici, potremmo ritrovarci con una manciata di "mega-siti" che tutti (singoli e aziende) hanno semplicemente una pagina su ...

Questo ha senso per un certo numero di aziende; è molto più facile convincere le persone a scoprire e visitare la tua pagina Facebook o Twitter piuttosto che farle inciampare (gioco di parole!) il tuo dominio (es .: myownawesomewebsite.com/me). I vincitori di questa tendenza sono, ovviamente, i grandi siti di social media che raccolgono sempre più traffico. I perdenti? Bene, se questa tendenza continua, i perdenti potrebbero benissimo essere chiunque non salti sul carro del carro ... quindi invece di una rete composta da milioni di siti diversi e unici, potremmo finire con una manciata di "mega-siti" che tutti (individui e aziende) hanno semplicemente una pagina su.


Lascia che cominci la discussione!

Bene, quindi ho appena raggiunto la punta dell'iceberg per tutte le grandi tendenze che si sono verificate nel 2010, e sarò il primo ad ammettere che sono sicuro di aver perso qualcosa. Pubblica i tuoi commenti, pensieri, tendenze e qualsiasi altra cosa nella sezione commenti e prenderò in considerazione qualsiasi commento davvero eccezionale quando verrà il momento di modificare questo post più tardi!

Felice 2011!