Cum să adăugați în mod strategic animație pe site-ul dvs

Utilizarea animației în design web nu este tocmai un lucru nou.

Îți amintești de era trecută a gifurilor 3D rotative?

Ce zici de viața și moartea lui Flash?

După ce Apple a interzis folosirea Flash pe toate dispozitivele lor mobile, designerii s-au grăbit să găsească o modalitate de a reintroduce animația în joc. Datorită creativității dezvoltatorilor și designerilor web, avem acum magia tranzițiilor CSS3, a animațiilor SVG, a GIF-urilor de înaltă calitate și, desigur, a videoclipurilor animate create cu programe precum After Effects și Blender.

Au fost câțiva ani recent în care tendința a fost de a proiecta site-uri plate. Din fericire, animația și-a revenit în mare măsură și este acum una dintre cele mai mari tendințe pentru 2018 și nu numai.

Animațiile au devenit acum o așteptare.

Influența pozitivă a animației asupra UX și UI Design nu este surprinzătoare, datorită modului în care oamenii sunt creaturi vizuale și vor fi întotdeauna atrași de mișcare și mișcare. Animațiile pot aduce la viață orice proces, transformându-l într-o experiență. Mișcările permit utilizatorilor să știe că ceva se întâmplă.

De exemplu, animațiile din interiorul celulelor formularului pot notifica utilizatorii că au făcut o greșeală sau că lipsesc informații. Sau când introduceți o parolă și este greșită, asteriscurile pot deveni roșii, pot dansa puțin și pot dispărea.

Sau ce zici de această animație distractivă de conectare? Posibilitățile de animație în web design cresc în fiecare zi. De ce să nu adăugați și câteva animații strategice pe site-ul dvs.?

Animarea site-ului dvs

Opțiunile despre cum să adăugați animație pe site-ul dvs. sunt destul de extinse, dar asta nu înseamnă că ar trebui să fie plin de pictograme săritoare și butoane rotative. Trebuie să existe un echilibru între cantitatea de animație pe care o includeți în design. Gândiți-vă mai mult după „mișcarea soft” decât la o pagină care se mișcă atât de mult încât nu știți unde să căutați. Folosirea excesivă a animației este la fel de dureroasă ca și minimalismul excesiv!

Utilizarea unui program precum Adobe XD poate ajuta la procesul de încercare a diferitelor animații pentru a le plasa strategic pe site-ul dvs. Dacă vă place să construiți direct în WordPress, atunci o opțiune excelentă este Divi Builder, care vine cu o mulțime de posibilități de animație în fiecare modul.

La sfârșitul articolului, am inclus câteva link-uri către câteva resurse excelente care vă vor ajuta să adăugați animații pe site-ul dvs.

Să aruncăm o privire la diferitele tipuri de animații care pot îmbunătăți UX-ul site-ului și compoziția vizuală generală.

Funcțional sau estetic

Animațiile au două utilizări în design web; funcționalitate și estetică.

Animații funcționale

Animațiile pot ajuta vizitatorii cu călătoria lor pe site-ul dvs. Aduc atenția asupra îndemnurilor la acțiune sau a secțiunilor importante pe care nu doriți să le rateze. Ele ușurează procesele și sunt plăcute vizual.

Se încarcă animații

Cea mai comună animație funcțională și una dintre primele care este obișnuită în designul site-ului web este animația de încărcare. Acestea erau găsite în principal când un site a fost deschis pentru prima dată, dar acum, când site-urile se încarcă instantaneu, sunt folosite pentru lucruri precum încărcarea videoclipurilor, progresia descărcărilor și alte procese pe care le-ar putea avea site-ul dvs.

Pentru ca animația dvs. de încărcare să fie eficientă, trebuie să se potrivească cu marca dvs. Dacă site-ul dvs. este distractiv și plin de culoare, animația dvs. de încărcare poate fi orice, de la o minge care sări până la o buclă colorată. Pe de altă parte, dacă site-ul tău este serios și formal, atunci animația de încărcare ar trebui să urmeze acel stil.

Planează

Alte animații funcționale comune pe care ar trebui să le luați în considerare sunt hover. Suntem deja destul de obișnuiți să vedem animații de tip hover și majoritatea oamenilor se vor aștepta la ele. Schimbarea culorii unui buton atunci când trece cu mouse-ul este o animație de bază pe care ar trebui să vă gândiți să o utilizați, fie în meniul dvs., fie într-un îndemn.

Alte modalități de utilizare a hoverului sunt butoanele care nu arată ca niște butoane sau dacă doriți să afișați informații despre trecerea cursorului înainte ca acestea să dea clic.

Derulare

Site-urile web cu efecte de defilare nu mai sunt un fenomen unic. Parallax scrolling a devenit foarte popular (și devine puțin obositor, să spun adevărul). Deci, dacă doriți să utilizați derularea animată, gândiți-vă în afara casetei. Includeți elemente care se deplasează de la secțiune la secțiune, elemente care apar progresiv odată cu derularea. Gândiți-vă la funcționalitate, precum și la estetică.

Animații estetice

Animațiile estetice sau decorative sunt cele care fac un site mai atrăgător din punct de vedere vizual, dar nu ajută neapărat la funcționalitate. Există o metaforă veche din epoca primelor desene animate Walt Disney, că animația este o „iluzie a vieții”. Ceea ce face animația unei imagini statice este să o aducă la viață, să o facă să respire.

Cu cantitatea potrivită de animație estetică, site-ul tău poate fi de neuitat.

La fel ca animația funcțională, animația decorativă trebuie să aibă un echilibru. Întrebați-vă dacă acel fundal animat este cu adevărat necesar sau dacă se potrivește în mod corespunzător cu marca dvs. Fiecare fotografie trebuie să fie animată pe ecran sau aveți nevoie de atâtea ferestre pop-up? Asigurați-vă că animațiile pe care le adăugați sunt suficiente pentru a face site-ul dvs. plăcut de privit, dar nu copleșitor.

Fundaluri animate

Cele mai la modă fundaluri animate în acest moment sunt fundalurile cu particule, de la puncte simple în mișcare la mișcări complexe cu efect de lumină. Acestea pot fi adăugate ca fundal pentru o pagină întreagă sau doar pentru secțiuni. Acestea pot face ca zonele site-ului dvs. să aibă mai multă personalitate. Amintiți-vă că tendințele se schimbă, așa că dacă folosiți un fundal cu particule, asigurați-vă că se potrivește cu adevărat site-ului dvs.

Creativitate nelimitată

Nu în ultimul rând, ceea ce poate face animația pentru site-ul tău este să ofere creativitate nelimitată. Deoarece puteți anima aproape orice, posibilitățile creative sunt nesfârșite. De la fundaluri animate la lucruri care se mișcă pe ecran și chiar animații subtile precum un personaj care clipește.

Un site se poate baza atât de mult pe animație, încât călătoria prin pagini este o adevărată experiență. Luați noul site pentru Porsche, de exemplu, care arată istoria producătorului auto de-a lungul anilor.

Sau puneți împreună ilustrația izometrică și derularea animată și obțineți un site uimitor precum RollPark.

Întotdeauna Optimize pentru mobil!

Ar fi nedrept pentru mine să nu vă reamintesc că ar trebui să vă verificați întotdeauna animațiile de pe mobil. Asigurați-vă că funcționează așa cum ar trebui și faceți ajustări dacă nu. Dacă utilizați animații SVG, atunci nu ar trebui să aveți prea multe probleme, deoarece graficele .svg sunt scalabile la infinit.

Oricum ar fi, verificarea mereu pe mobil și optimizarea animațiilor pentru toate formatele vă va face site-ul mult mai bun!

Instrumente care vă ajută să vă animați site-ul

Iată o listă de link-uri către articole practice pentru diferite tipuri de animații pe care le poți folosi pe site-ul tău.

• O colecție de biblioteci de animație gratuite
• Capacitățile de animație DIVI Builder
• Creator de fundal de particule
• Două moduri de a crea fundaluri simple de particule cu CSS
• Folosind animația SVG

În concluzie

Mențineți animațiile echilibrate în ceea ce privește funcționalitatea și estetica. Sunt instrumente pentru a vă aduce site-ul la viață, nu pentru a-l face copleșitor. Amintiți-vă să fiți creativ și să gândiți în afara cutiei.

Când vă construiți următorul site web (sau îl actualizați pe cel existent), veți adăuga ceva animație la design? Amintiți-vă: cel mai bine este să experimentați pe un site de testare sau pe un site local înainte de a adăuga orice cod nou permanent pe site-urile live!

Cu ce ​​tip de animație veți experimenta în continuare?