Sommario:
- Altre immagini e illustrazioni
- Scorrimento orizzontale
- Scorrimento verticale
- Intestazioni fisse
- Navigazione creativa
- Storytelling
- Navigazione all'interno di una pagina
- Spostarsi dal flash
- HTML5, CSS3 e JavaScript
- Responsive Web Design
Video: Keynote (Google I/O '18) 2024
Usando Adobe Edge Animate, puoi creare tutte le tendenze del design elencate qui. Le tendenze del web design qui presentate, per la maggior parte, rappresentano non solo nuove tecniche di codifica, ma anche nuovi modi in cui il pubblico può interagire con il tuo sito in modi coinvolgenti. Quando attiri l'attenzione del tuo pubblico e falli incuriosire nel tuo web design, sei sulla buona strada per mantenere quel pubblico.
Altre immagini e illustrazioni
Sei stanco e annoiato di guardare un muro di testo? Tutte quelle piccole immagini e icone iniziano a sembrare un po 'datate? Ti fa sbadigliare un solido colore di sfondo? Se ti senti in quel modo, ci sono buone probabilità che il tuo pubblico si senta allo stesso modo.
L'aggiunta di ulteriori immagini e illustrazioni al tuo sito può migliorare notevolmente il tuo web design. Per rendere il tuo sito più attuale, aggiungi un'immagine di sfondo sottile anziché utilizzare uno sfondo bianco, grigio o nero.
È possibile importare facilmente le immagini da utilizzare con la composizione di Animate e come lavorarci. Scopri come utilizzare le immagini in background e la differenza tra l'utilizzo di un tag div e un tag img per le immagini. Puoi impostare i predefiniti di layout per le tue immagini.
Scorrimento orizzontale
La creazione di web design con scorrimento orizzontale potrebbe richiedere un po 'di coraggio - raramente è stato fatto - ma ciò non significa che non sia stato fatto prima e con grande effetto. Una semplice ricerca sul web per "grandi siti web orizzontali" non ti lascerà deluso. Troverai molti grandi esempi di siti artistici, gallerie e siti creativi che utilizzano lo scorrimento orizzontale con grande effetto.
Anche se questo tipo di navigazione è ancora relativamente nuovo, creando un sito in questo modo è possibile mettersi in testa al gruppo in termini di design web alla moda.
Scorrimento verticale
Proprio l'opposto dello scorrimento orizzontale è lo scorrimento verticale. Mentre lo scorrimento verticale è stato un trend di web design popolare per molti anni, negli ultimi due anni è stato notevolmente esagerato.
Molti siti utilizzano una tecnica di scorrimento verticale senza fine che mantiene il pubblico sulla pagina. Questo stile di presentazione senza fine è progettato per mantenere l'attenzione del pubblico sulla continua ricerca di più contenuti.
Intestazioni fisse
Se decidi di progettare una pagina Web animata utilizzando il metodo a scorrimento verticale senza fine, allora potresti voler aggiungere un intestazione fissa al tuo sito. Un'intestazione fissa è un menu di navigazione che si trova nella parte superiore della pagina e rimane visibile mentre il pubblico scorre lungo la pagina.
Questa funzione consente al pubblico di navigare rapidamente da dove si trova a una sezione diversa del tuo sito e di sapere sempre dove si trovano.
Un'intestazione fissa è una comodità che il pubblico può apprezzare perché non è necessario scorrere fino in cima alla pagina per trovare il menu. Le funzionalità che tengono a mente la comodità dell'utente manterranno anche il pubblico sul tuo sito per periodi di tempo più lunghi.
Navigazione creativa
La creatività con la navigazione è perfettamente complementare all'utilizzo di più illustrazioni e immagini nei progetti web. Invece di un menu di testo di base, utilizzare le immagini per indicare un collegamento. Dopo che i tuoi utenti avranno imparato che possono fare clic sulle immagini per avanzare nel tuo sito, diventeranno più a loro agio nella ricerca di link in luoghi insoliti sul tuo sito.
Questo tipo di interazione offre l'opportunità di creare uova di Pasqua all'interno del tuo sito. Un uovo di Pasqua, in questo contesto, rappresenta contenuti apparentemente nascosti che possono sorprendere ed eccitare il pubblico quando si imbattono in esso.
Un ottimo modo per mostrare al pubblico che un'immagine o un'icona è un collegamento consiste nell'utilizzare la funzione di attributo Cursore in Animate. Quando il pubblico passa il puntatore del mouse su un'immagine collegata, il cursore può passare da un puntatore a una mano, indicando un collegamento.
Storytelling
Tutti amano una storia avvincente. Quindi, perché non progettare un sito o un'animazione che racconta al tuo pubblico una storia avvincente? Invece di creare un sito web di ristoranti di base che presenti solo immagini del cibo e descrizioni degli ingredienti, perché non creare una storia di sfondo fantasiosa?
Oltre a elencare i tuoi piatti migliori come biologici locali, coltivati in fattoria, bontà sostenibile, perché non aggiungere una storia sulla coppia che si è fidanzata tra il piatto principale e il dessert? È possibile aggiungere un'animazione di un anello che cade in un flute di champagne, completo di bolle in aumento.
I visitatori del sito potrebbero essere arrivati al tuo ristorante in cerca di un buon pasto, ma resteranno per saperne di più su ciò che accade agli altri tavoli. Le animazioni dei siti web di narrazione non solo migliorano la presentazione, ma possono connettersi con le esperienze di vita dei visitatori.
Navigazione all'interno di una pagina
I siti Web di una pagina - noti come siti di brochure - stanno tornando. Mantenendo il pubblico su una singola pagina che può assumere l'aspetto di varie pagine diverse, è possibile sfruttare la tendenza di scorrimento.
Invece di fare clic su diverse pagine nel tentativo di trovare qualcosa, il pubblico può invece scorrere il tuo sito mentre procede attraverso i tuoi contenuti. I collegamenti che fungono da immagini possono anche aiutare il pubblico a passare direttamente a punti specifici del sito quando sanno cosa vogliono - mentre ancora coinvolgono qualcuno che cerca casualmente.
Creando un sito come descritto in questa sezione, stai sfruttando le attuali tendenze del web design: scorrere le informazioni, usare più immagini e implementare la navigazione creativa …
Spostarsi dal flash
Adobe Flash era una volta l'onda del futuro, ma quell'onda si è schiantata sulla spiaggia e una nuova ondata sta arrivando.Dove Flash era lo strumento predominante per la creazione di animazioni e siti Web, il periodo di massimo splendore di quell'attrezzo è arrivato e finito.
Adobe Edge Animate potrebbe non essere pronto per sostituire completamente Flash, ma è sulla buona strada per realizzare proprio questo. Dopotutto, non è possibile visualizzare Flash su dispositivi i-i come iPhone e iPad e chi vuole creare contenuti che sembrano rotti su alcuni dei dispositivi mobili più diffusi in circolazione?
HTML5, CSS3 e JavaScript
Il mondo delle tecniche di web design e codifica è in continua evoluzione. La grande tendenza del codice è HTML5 e CSS3, che diventeranno sempre più radicati nella web-o-sphere. Google Chrome è in testa alla carica, implementando gli standard più recenti - con Firefox e Safari a fianco.
Poi c'è Internet Explorer - al momento un po 'in ritardo alla festa - ma Microsoft sta facendo passi da gigante nell'aggiornare il proprio browser per tenere il passo.
Proteggi la tua animazione dall'apparire non funzionante su versioni precedenti di Internet Explorer utilizzando lo stage di livello inferiore e le diverse opzioni di pubblicazione sul Web offerte da Edge Animate. A questo proposito, semplicemente l'utilizzo di Adobe Edge Animate potrebbe essere considerato una tendenza del web design stesso!
Responsive Web Design
Il responsive web design (RWD) è l'ultima moda di questi tempi. L'idea alla base di RWD è progettare un sito da utilizzare su qualsiasi numero di dispositivi, dai monitor desktop ai tablet ai telefoni. Mentre i web designer potrebbero essere divisi sulla possibilità di creare un sito mobile separatamente da un sito desktop, o di creare un singolo sito in grado di rispondere alle dimensioni del browser, la tendenza si sta inclinando verso il campo reattivo.
La ragione di questo è piuttosto semplice, creando un sito reattivo, non è necessario mantenere l'aggiornamento di due siti diversi. Creare un punto RWD nella direzione del futuro; più tecniche e strumenti di codifica più avanzati diventano, meglio funzioneranno con RWD. Consideralo in un altro modo in cui Adobe Edge Animate ti mette all'avanguardia delle tendenze del web design.