Web Design Digital Trends 2013

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

3. N° 1 Responsive Web Design
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:

4. 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

6. 
CLICCA QUI PER VEDERE IL SITO

7. 

8. 

9. 

10. 

11. 

12. 

13. N° 2 Grandi foto di background

14. 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

15. 

16. 

17. 

18. 

19. http://laviealafresh.com/http://laviealafresh.com/


20. N° 3 Video fullscreen

21. 

22. 

23. 

24. N° 4 Parallax Scrolling

25. 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.

26. 

27. 

28. 

29. 

30. N° 5 Flat Design

31. Flat Design
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.
“Less is more!”
Ludwig Mies van der Rohe
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.

36. 

37. 

38. N° 6 Infinite Scrolling
& Tiles layout

39. 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.

40. 

41. 

42. 

43. 

44. 

45. Esempi


46. N° 7 Unusual Navigation

47. 

48. 

49. N° 8 Subjective Experience

50. 

51. 

52. 

53. 

54. N° 9 Fixed Navigation

55. 

56. 

57. 

58. 

59. 

60. N° 10 Typographic
and Large Font Design

61. 

62. 

63. 

64. Grazie
Stefano Rho
Digital Creative Director
@stefano_rho
BREXlab | RBA Group
Viale Premuda 38/A 20129 Milano www.brexlab.com