Web Design Digital trends 2013

Page 1


“The best way to predict your future is to create it” Abraham Lincoln


La seguente presentazione è una raccolta di tendenze grafiche, tecnologia, interface design, più diffuse ed utilizzate dai più grandi Marchi e migliori Web Agency al mondo. Se state pensando di fare o rifare un sito, guardate i siti che seguono e ispiratevi ;) Iniziamo ora con la classifica dei trend attualmente più diffusi:

N° 1 Responsive Web Design


Responsive Web Design Il Responsive Web Design è l'approccio secondo il quale il design e lo sviluppo di un sito web "risponde" all'utente adattandosi alla risoluzione utilizzata, in base alla grandezza dello schermo, della piattaforma utilizzata e dell'orientamento del dispositivo (orizzontale o verticale). In pratica si tratta di utilizzare la tecnologia adeguata (CSS media queries, scripts e immagini adattabili ecc.) affinchÊ il sito si adegui automaticamente alle preferenze di utilizzo dell'utente finale. Il responsive web design, potrebbe potenzialmente eliminare la necessità di realizzare design differenti per ogni nuovo gadget sul mercato.

Ogni nuovo cliente, oggi, vuole il proprio sito visibile su qualsiasi dispositivo: computer desktop, laptop, netbook, iPad, iPhone e Android, Blackberry, Kindle, Galaxy, ecc



CLICCA QUI PER VEDERE IL SITO








N째 2 Grandi foto di background


Grandi foto di background Un ottimo modo per catturare l'attenzione del navigatore è usare grandi foto nel sito, sfruttando il background adattivo. Grazie alla diffusione di connessioni sempre più veloci, il pesi in Kb dei siti possono essere più elevati. Questo ci permette di usare contributi fotografici più grandi, creando così impatto emotivo.

La risoluzione dei monitor più diffusa passa da 1024 x 768 a 1366 x 768pixel






http://laviealafresh.com/ http://laviealafresh.com/

ďƒŹ


N째 3 Video fullscreen





N째 4 Parallax Scrolling


Parallax scrolling Il parallax scrolling è una tendenza che sul web è diventata estremamente popolare. Nasce dalla progettazione grafica dei video games old- school a scorrimento laterale che utilizzavano l’effetto parallasse come espediente per produrre profondità. Gli elementi grafici più lontani venivano fatti scorrere lentamente, mentre quelli più vicini allo spettatore si muovevano più velocemente, dando un effetto pseudo-3D.






N째 5 Flat Design


Flat Design

“Less is more!” Ludwig Mies van der Rohe

Il ‘flat design’ è una tendenza degli ultimi anni che vuole un graphic design molto minimale, basato su tinte piatte e un sapiente uso del colore e della tipografia per riuscire ad arrivare ad un ordine concettuale sia visivo che funzionale che tolga gli orpelli per portare in primo piano sempre e comunque il contenuto. Il flat design si preoccupa di offrirvi un’interazione attraverso elementi semplici, ben calibrati e soprattutto minimali, sia visivamente che funzionalmente.

Per la prima volta Microsoft ha anticipato la tendenza: con Windows 8, il layout “metro theme” pensato per le piattaforme mobili e il touch screen, sembra avere aperto la strada al flat design. Anche Apple molla gli ormeggi del “vecchio” per darsi a quello che ritiene il “nuovo”. Uno stacco netto con il passato, il look 2.0, fatto di texture, foto riflesse, sfumini e stondini vari per approdare nel fantastico mondo del flat design.








N째 6 Infinite Scrolling & Tiles layout


Infinite Scrolling Grazie alla popolarità di Pinterest, lo scroll infinito e il tiles layout, o anche chiamato Masonry layout, nei siti sta diventando sempre più diffuso. Un Tiles layout è quella struttura web in cui le foto ed i loro contenuti correlati di informazioni sono affiancati su una pagina. In genere, queste piastrelle (tiles) hanno diverse altezze, rendendo il template di pagina non regolare, dinamico, mosso, ma il tutto confezionato molto semplicemente, in modo che le immagini del sito siano il principale punto di riferimento per l'utente. Il risultato è un layout pulito, schermo pieno di immagini che mantengono l'utente impegnato e continuamente la navigazione. Al layout si abbina anche una funzione tecnica: il caricamento dei contenuti in pagina. La pagina nonostante sia ‘infinita’ e quindi ricca di contenuti, si carica velocemente, perché i contenuti caricati saranno solo quelli che l’utente vede a monitor.







Esempi

ďƒŹ


N째 7 Unusual Navigation




N째 8 Subjective Experience






N째 9 Fixed Navigation







N째 10 Typographic and Large Font Design





Grazie Stefano Rho

Digital Creative Director @stefano_rho

BREXlab | RBA Group

Viale Premuda 38/A 20129 Milano www.brexlab.com


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.