Tendenze del web design per il 2010
I puristi diranno che il grande design è senza tempo. Sì, in un mondo ideale, dovremmo ignorare le tendenze.
Pragmaticamente parlando, però, c'è molto valore nel monitoraggio e nell'integrazione delle tendenze del design, specialmente per quanto riguarda i siti web.
Ammettiamolo: la rete cambia a un ritmo rapido. A differenza di altri media, le tendenze del design sul web non sono solo guidate dall'estetica.
La tecnologia sta cambiando e può modificare drasticamente le capacità del mezzo.
Nel 2010, stiamo vedendo i designer continuare a spingere i confini del web design, impostando le seguenti chiare tendenze ...
Stampa Design
Il design di stampa è sempre stato una fonte di ispirazione per il web. Il web design è ormai abbastanza lungo da coltivare un forte nucleo di designer che non hanno mai lavorato nella stampa. Di conseguenza, stiamo vedendo più ispirazione tratte dalla stampa, in quanto questi designer guardano oltre il web.
Font Serif
Uno dei problemi più importanti della tipografia è la leggibilità. I designer di stampa hanno sempre preferito i caratteri serif perché i bordi migliorano la visibilità e rendono più facile riconoscere le forme delle lettere.
I caratteri Sans-Serif sono stati generalmente considerati più facili da leggere sullo schermo. Ma con più utenti che navigano ad alta risoluzione e con i miglioramenti della tecnologia di lisciatura dei caratteri, i caratteri serif sono diventati molto leggibili per il corpo del testo.
Grandi titoli
I designer di stampa hanno utilizzato grandi titoli per attirare l'attenzione per secoli. Il materiale di stampa ha dovuto essere di grande impatto se era previsto che fosse letto. Se hai visto un opuscolo noioso seduto su una scrivania, ti daresti la briga di prenderlo? Probabilmente no.
Questa tendenza è iniziata nel 2009 ed è cresciuta solo in popolarità. È stato dimostrato che grandi titoli attirano l'attenzione e comunicano chiaramente.
Layout a più colonne
I progettisti devono lavorare entro i limiti del loro mezzo. A differenza del web, la stampa non offre alcuna opzione per lo scorrimento, essendo limitata dalle dimensioni della carta. L'utilizzo di più colonne consente di adattare più contenuti nello stesso spazio.
Ora, con l'aumento delle risoluzioni dello schermo e l'avvento dei layout della griglia, un numero maggiore di progettisti sta adattando questo metodo al Web per rendere i siti Web più facili da utilizzare e adattarsi a più contenuti.
Grande immagine di piombo
Un'immagine vale più di mille parole. Mentre può passare un po 'di tempo prima che una fotografia abbia lo stesso impatto sul web come nella stampa (che ha una risoluzione molto più alta), l'adozione dell'accesso alla banda larga ha reso le foto più grandi più fattibili.
Stiamo vedendo più siti Web utilizzare immagini di grandi dimensioni e di grande impatto per attirare utenti e creare un'esperienza coinvolgente.
Diagrammi e infografica
I grafici di stampa hanno utilizzato la grafica per trasmettere informazioni complesse per anni. Questo è visto più comunemente nelle riviste e nelle relazioni annuali.
La grafica può comunicare relazioni e rapporti complessi in un modo che è troppo difficile da fare con il testo normale. Le infografiche tendono ad avere un aspetto semplice ma visivamente ricco e molti designer stanno adottando infografiche o imitando lo stile nei loro progetti.
Semplicità
Antoine de Saint-Exupery una volta disse: "La perfezione si ottiene non quando non c'è altro da aggiungere ma quando non c'è più nulla da togliere". I vantaggi della semplicità nel design sono molti.
La legge di Hick ci dice che il tempo necessario per prendere una decisione aumenta con ogni opzione. Inoltre, la teoria segnale-rumore ci dice che tutto ciò che non aggiunge al messaggio o alla funzione di un sito web (il segnale) si intromette e rende il design meno efficace (il rumore).
I disegni semplici sono più facili da usare e da comprendere e consentono una maggiore chiarezza nella comunicazione dei messaggi.
Design minimalista e griglia
Il minimalismo è potente ma difficile da padroneggiare. Non contiene nient'altro che l'essenziale. Tutto il resto viene rimosso, con il conseguente impatto massimo degli elementi presenti.
I design minimalisti richiedono un forte sistema di grid per essere efficace. Naturalmente, avranno un sacco di spazio bianco, e quindi senza quella griglia, un design minimalista si sentirebbe disconnesso e sciatto. La griglia le dà organizzazione e struttura.
Layout a pagina singola
Ci sono diversi modi per semplificare. Un layout di una pagina presenta due di questi modi: nascondere e rimuovere.
I layout efficaci di una pagina nascondono tutti gli elementi che non sono una priorità. Se un utente vuole vedere uno di questi elementi, può fare clic per scoprirlo. Questo è molto più efficace che lasciare tutto visibile, il che renderebbe la pagina complicata e opprimente.
Allo stesso modo, il principio alla base dei layout di una sola pagina rende superflue le pagine aggiuntive. Con la disponibilità di potenti librerie JavaScript e connessioni più veloci, molti siti web ora hanno poca necessità di più pagine. I progettisti possono facilmente adattare le informazioni su una pagina, senza disturbare l'utente con una gerarchia.
Massive White Space
Agli albori del web design non avevamo molto spazio per lo schermo su cui lavorare, quindi non abbiamo mostrato molto spazio bianco. Se hai mai provato a progettare un sito Web con una risoluzione di 640 × 480, saprai esattamente di cosa sto parlando.
Ora che abbiamo risoluzioni più elevate e la possibilità di nascondere e rivelare elementi con JavaScript, sfruttare lo spazio bianco è molto più semplice.
Lo spazio bianco è fondamentale per un buon design. Dà all'occhio un posto dove riposare. Migliora naturalmente la qualità di un design. E mostra quali elementi sono collegati l'uno all'altro per via della vicinanza.
Layout tipografici
Mentre eravamo limitati a pochi selezionati "caratteri web-safe" con un controllo molto piccolo su come venivano visualizzati, ora abbiamo una vasta gamma di strumenti per arricchire la nostra tipografia.
I web designer hanno apprezzato a lungo l'uso del tipo come strumento sottile per comunicare i messaggi. Con il controllo e le funzionalità crescenti, stiamo vedendo più designer concentrarsi sulla tipografia come elemento di progettazione principale.
Tecniche CSS3
Non sei sicuro di poter usufruire ancora del CSS3? Pensa di nuovo. I pionieri del Web come Andy Clarke e Jeremy Keith hanno predicato a lungo sul "miglioramento progressivo" del web design.
Il miglioramento progressivo riguarda la progettazione di siti Web in modo che possano essere utilizzati su browser meno recenti, pur essendo "migliorati" per gli utenti che si affidano alla tecnologia più recente.
La progettazione in questo campo ti consente di sfruttare le proprietà CSS3 come gli angoli arrotondati, gli sfondi del bordo e le ombre di testo e riquadro. Gli utenti dei browser moderni vedranno la versione più bella e quelli con tecnologia precedente ( cough | IE6 | cough ) vedranno la versione base.
Animazione CSS3
L'animazione sul web ha attraversato molte fasi. Inizialmente, potevamo animare solo con i file di immagine GIF. Quindi, eravamo quasi limitati a Flash. Ora possiamo selezionare Flash, Silverlight, GIF, JavaScript e persino CSS3. L'animazione sottile può essere memorabile e CSS3 lo rende leggero e facile.
Angoli arrotondati
Lo stile Web 2.0 del 2005 e del 2006 ha reso popolari gli angoli arrotondati, al punto da risultare fastidiosi. A quel tempo, la loro creazione era difficile. Non c'era un modo per creare angoli veramente arrotondati. Invece sono stati simulati con CSS, JavaScript hack e file di immagine.
CSS3 ora ci consente di generare angoli arrotondati direttamente nel browser, rendendoli non solo più facili da creare ma anche molto più efficienti, poiché l'utente non deve scaricare immagini aggiuntive o file JavaScript.
I progettisti stanno sfruttando sempre di più questa nuova funzionalità del browser nel 2010.
Ombre di casella e testo
L'uso delle ombre per creare un senso di profondità è stato fatto (e talvolta esagerato) sin dai primi giorni del web. Ma non era sempre pratico. Per aggiungere ombre al testo, è stato necessario utilizzare le immagini, che hanno aumentato il tempo di caricamento e reso più difficile la manutenzione. Le ombre delle scatole richiedevano parecchie immagini e trucchi CSS come "porte scorrevoli".
CSS3 ha funzionalità di ombreggiatura altamente personalizzabili, che consentono una vasta gamma di effetti creativi, inclusi non solo le ombre esterne ma anche le ombre interne. I designer creativi hanno già utilizzato questi effetti CSS3 per simulare effetti sia in rilievo che impressi.
RGBa e Opacità
Per anni, lavorare con opacità e trasparenza sul web era quasi impossibile. Hai avuto tre scelte: simula la trasparenza usando immagini piatte, gestisci le incompatibilità cross-browser di PNG o lotta con i selettori e filtri di trasparenza base di CSS.
CSS3 offre ai designer una coerenza e una libertà molto migliori nell'utilizzo dell'opacità con la proprietà RGBa. Mentre è possibile trarre vantaggio dalla trasparenza in innumerevoli modi, un'area in particolare ha contribuito a sfondi complessi sovrapposti a colori semitrasparenti. In precedenza, questo effetto era poco pratico o impossibile da creare senza ricorrere a immagini PNG complesse.
Design compatibile con dispositivi mobili
Il Web mobile ha dato a milioni di utenti la possibilità di controllare il proprio conto bancario mentre si è in fila, consultare gli ultimi risultati sulla metropolitana e aggiornare lo stato di Twitter durante la guida. (Quale di questi è un'abitudine pericolosa?) E il web mobile continua a crescere rapidamente.
Siamo arrivati al punto che ogni azienda deve considerare se il proprio sito web verrà utilizzato in viaggio e, in caso affermativo, come. Le aziende innovative hanno già investito molto in versioni mobili utili e di facile utilizzo dei loro siti web.
creatività
La crescita esplosiva nell'uso dei social media è la prova che le persone vogliono connettersi e condividere cose di cui sono appassionati.
Nel campo del design, abbiamo visto una grande crescita nella condivisione e nella navigazione del lavoro di altre persone. Come designer, siamo ora bombardati dalla creatività di tutti gli altri. Ciò non solo aumenta lo standard di qualità del design, ma incoraggia le idee a essere condivise, il che contribuisce a una cultura della creatività e dell'innovazione.
Illustrazioni pulite
Se sei come me, sei cresciuto guardando i film Disney, ammirando tutti gli sforzi fatti per creare ogni fotogramma dell'animazione. Siamo ben oltre i giorni in cui l'illustrazione è stata fatta con inchiostri e pennarelli e questa evoluzione degli strumenti ha portato ad approcci molto creativi al design.
Molti designer stanno imparando che le illustrazioni lisce, pulite e nitide creano un tocco distintivo che non può essere replicato dalla fotografia o dalla semplice clip art. Il risultato è una vasta gamma di disegni professionalmente illustrati che sono accattivanti e invitanti.
Sfondi strutturati
Gli sfondi testurizzati non sono una novità sul web. Ma questa tecnica ha visto una variazione interessante negli ultimi mesi. Mi riferisco ad esso come a "micro-trame" che sono trame sottili, appena percettibili sullo sfondo.
miniature
Forse starai dicendo: "Le miniature sono in circolazione sin dagli albori del web. Come è questa una tendenza? "È vero, sono sempre stati usati, ma solo in modo molto semplice. Avresti una miniatura da cui puoi cliccare per ottenere un'immagine più grande. Ha fatto il lavoro ma era noioso.
Negli ultimi mesi, i designer hanno iniziato a chiedere: "Come possiamo rendere le miniature più eccitanti?" Ciò ha portato a una ripresa delle miniature che sono sia intelligenti che utilizzabili.
Acquerello
Con l'evolversi del web, stiamo assistendo a un maggior numero di designer che si ispirano a una varietà di fonti e media. Nessuna sorpresa che le belle arti siano tra queste fonti.
Uno degli stili che è emerso è la simulazione di acquerelli. L'aspetto morbido ed elegante di questo stile è distinto e rilassante.
Grafia
I font scritti a mano e gli script sono più abusati. Per questo motivo, molti stilisti evitano entrambi i tipi per disgusto o per paura di sembrare amatoriale. Ma ultimamente, molti designer hanno scoperto che, se usato correttamente, lo stile scritto a mano trasmette un senso del mestiere e della pianificazione. Utilizzato nel giusto contesto, è un modo potente per comunicare.
Social media
Ora che le persone trascorrono più tempo su Facebook che su Google, non c'è da meravigliarsi se i designer cercano modi innovativi per integrare i social media sui loro siti web.
Alcuni designer si sono spinti fino al punto di pubblicare i loro contenuti sui social network e quindi utilizzare i loro siti web per aggregarli.
È sicuro dire che con il progredire del 2010, vedremo più designer trovare modi creativi per integrare i social media sui loro siti web al fine di coinvolgere meglio gli utenti.
Elementi risolti
Ora che i browser supportano meglio il position: fixed elemento, stiamo vedendo usi più intelligenti di esso.
Ci sono molte situazioni in cui un elemento fisso (come la navigazione persistente) può servire agli obiettivi di business del proprietario e rendere il sito più utilizzabile.
Gli elementi fissi sono memorabili e migliorano l'esperienza dell'utente. Hanno innumerevoli usi creativi e continueremo a vedere i progettisti approfittarne.
Questo guest post è una collaborazione tra la brava gente di Web Hosting Search e il designer e sviluppatore Ross Johnson. Controlla la ricerca di hosting Web per il corretto web hosting e 3point7designs per più web design awesomeness di Ross
Quale di queste tendenze segui di più? Quali sono alcune altre tendenze emergenti?