Casa Social media Principali tendenze del Web design da applicare in Edge Animate - dummies

Principali tendenze del Web design da applicare in Edge Animate - dummies

Sommario:

Video: Keynote (Google I/O '18) 2024

Video: Keynote (Google I/O '18) 2024
Anonim

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.

Principali tendenze del Web design da applicare in Edge Animate - dummies

Scelta dell'editore

Converti documenti cartacei in file Acrobat PDF - dummy

Converti documenti cartacei in file Acrobat PDF - dummy

Una volta che hai Adobe Creative Suites 5, l'unica altra cosa è necessario convertire i documenti cartacei in PDF è uno scanner. Se si prevede di eseguire la scansione di un numero elevato di pagine in PDF, valutare l'acquisto di uno scanner con un alimentatore automatico di documenti. Alcuni scanner possono scansionare sia la parte anteriore che quella posteriore di un documento ...

Convertire pagine Web in file PDF - dummies

Convertire pagine Web in file PDF - dummies

Adobe Acrobat Creative Suite 5 può acquisire contenuti Web come notizie o informazioni commerciali e trasformarle in un file PDF. È possibile convertire una singola pagina Web o un intero sito Web. Se si desidera convertire solo una singola pagina e si utilizza Internet Explorer, fare clic su Converti pagina Web in ...

Convertire i file PowerPoint in PDF - dummies

Convertire i file PowerPoint in PDF - dummies

Adobe Acrobat Creative Suite 5 include strumenti che semplificano la conversione dei file di Microsoft PowerPoint in PDF. Quando installi Acrobat sul tuo computer, cerca i programmi di Microsoft Office. Se Acrobat individua Word, Excel, PowerPoint o Outlook, installa un componente aggiuntivo, PDF Maker, in questi programmi che consentono di convertire Microsoft ...

Scelta dell'editore

Che determina il tuo piano di attacco SEO - manichini

Che determina il tuo piano di attacco SEO - manichini

Assicurati di sapere cosa stai affrontando quando determinare il tuo piano di attacco SEO. Puoi più o meno dimenticare quelle migliaia di siti di ricerca e concentrarti su una manciata. Hai sei fattori essenziali con cui giocare: parole chiave, contenuto, ottimizzazione della pagina, link, invio e tempo. Dimentica il tempo: inizia subito! ...

Progettazione di codice "Spider-Friendly" per risultati SEO migliori - dummies

Progettazione di codice "Spider-Friendly" per risultati SEO migliori - dummies

Che tu stia scrivendo il tuo codice HTML o l'assunzione di un webmaster per farlo per te, si desidera mantenere il codice sottostante del codice del ragno-friendly per ottenere risultati SEO migliori. Fondamentalmente, devi semplificare il codice del tuo sito in modo che gli spider dei motori di ricerca abbiano un tempo facile per scansionare le tue pagine e capire che cosa ...

Esclude pagine Web da motori di ricerca usando Meta Robots Tag - dummies

Esclude pagine Web da motori di ricerca usando Meta Robots Tag - dummies

Puoi usare Tag Meta robot per impedire a uno spider dei motori di ricerca di eseguire la scansione di pagine specifiche nel tuo sito Web. Puoi includere un tag speciale nel codice HTML della pagina per dire ai robot di non indicizzare quella pagina, o di non seguire i link su quella pagina. Inseriresti questo tag ...

Scelta dell'editore

Cisco Networking: Network Protocol Analyzer Nozioni di base - dummies

Cisco Networking: Network Protocol Analyzer Nozioni di base - dummies

In precedenza Ethereal, Wireshark è un analizzatore di protocollo di rete, che è un strumento in grado di visualizzare i dettagli del traffico di rete. Prima della diffusione della commutazione di rete, uno strumento come questo potrebbe visualizzare tutto il traffico che scorre sulla rete. Negli ambienti commutati, viene visualizzato solo il traffico destinato al computer o il traffico broadcast su ...

Cisco Networking: MAC Addressing - dummies

Cisco Networking: MAC Addressing - dummies

L'indirizzo MAC viene preso di default dall'indirizzo hardware della scheda di rete. L'indirizzo MAC è un numero esadecimale di 12 cifre o 48 bit di lunghezza. Questo indirizzo è assegnato dal produttore dell'hardware ed è globalmente unico, quindi non dovresti avere indirizzi duplicati sulla tua rete (anche se le schede con indirizzi duplicati ...

Cisco Networking: OSI Model Layer 2 - Data Link - dummies

Cisco Networking: OSI Model Layer 2 - Data Link - dummies

Il secondo livello dell'Open Il modello System Interconnession (OSI) è il livello di collegamento dati. Il livello di collegamento dati è adiacente al livello fisico, quindi sono associati abbastanza strettamente insieme. Mentre lo strato fisico si occupa del supporto fisico reale (i cavi e così via su cui si spostano i dati), il collegamento dati ...