9 site-uri web cu animații care ne inspiră ca creatori de web

Creatorii de web se află într-o căutare nesfârșită de a-și actualiza site-urile web cu cele mai avansate efecte de design la modă, care reprezintă adevărata valoare a produsului sau serviciului lor. Dar între paletele de culori, tipografie, receptivitate, strategie de conținut și multe altele, gândirea unor tehnici avansate de proiectare poate fi oarecum intimidantă. Una dintre cele mai bune modalități de a obține un site web al cărui design merită să fie să te uiți la colegii tăi pentru inspirație. Întrebându-vă ce vă place despre design-urile lor, cum poate fi relevant pentru designul dvs. și cum doriți să îl modificați în funcție de nevoile dvs., poate fi de fapt foarte simplu.

Să vedem aceste nouă exemple de animații creative pentru site-uri web și să începem să învățăm de la profesioniști.

Tehnicile de animație pe care Handwrytten le folosește în secțiunea erou a paginii de pornire sunt o reprezentare puternică a produsului lor în sine: combinarea stiloului și a cernelii. O valoare cheie în acest design (printre altele) este că vizitatorul site-ului web înțelege imediat beneficiile pe care le oferă produsul și ce va câștiga prin utilizarea acestuia.

Fotografia unui card scris manual, juxtapus cu ilustrația desenelor animate, chiar spune totul. În ceea ce privește celelalte elemente de design de pe pagină, schema de culori curată albă și neagră, cu indicii de portocaliu apus de soare, atinge un echilibru de rafinament și fler artistic. După ce navigați pe acest site web, suntem cu siguranță motivați să privim în jur și să aflați mai multe despre produsul Handwrytten.

Crisp adaugă efecte de animație minore ilustrațiilor lor vectoriale care transmit mesaje de marcă rezonante, în ciuda dimensiunilor reduse ale ilustrațiilor. Animația subevaluată a fiecărei ilustrații vectoriale adaugă într-adevăr o notă umană personalității de brand a lui Crisp. Ne place în special focul animat din secțiunea care discută despre asistența pentru clienți. Acesta adaugă viață designului minimalist și plat, care este utilizat elegant pe toată pagina de pornire. Acesta este modul perfect de a utiliza aceste tehnici moderne de design plat, adăugând în același timp joie de vivre necesară pentru o experiență incitantă a utilizatorului.

Corebook întâmpină vizitatorul pe site-ul său web în modul întunecat complet, cu animații subtile și elegante în timp ce derulați site-ul. În propriul lor mod unic, Corebook găsește o modalitate de a proiecta animații eroi care sunt ușor și clar vizibile, în ciuda lipsei de contrast între griul închis pe fundalul său negru.

Alegerea conținutului de animație este minimalistă, dar informativă. Acest lucru este posibil cu doar câteva forme și culori pătrate, animațiile ilustrează tipul de produs finit (o carte de marcă) pe care clienții o vor avea în mână după aderarea la Corebook: propria lor carte de marcă care atinge standardele industriei și arată modern, la modă și sofisticat.

Best Day Ever folosește o tehnică de animație în buclă, astfel încât ilustrațiile lor animale să nu se bazeze pe declanșatoare pentru a continua să se miște. Orice ilustrare este vizibilă pentru vizitatorul site-ului web se deplasează continuu atâta timp cât poate fi văzută pe ecran.

Există o abordare care conține primul conținut pe toată pagina, deoarece cuvintele și propozițiile sunt scurte și nu mai lungi decât trebuie. Tocmai acest tip de abordare se asociază atât de bine cu animațiile prietenoase, cu combinația de text minimal cu un design optimist și colorat. Mișcările animalelor nu numai că dau viață textului cu care sunt asociate, dar realizează o experiență de conversație pentru fiecare utilizator.

Site-ul Best Day Ever este un prim exemplu al modului în care puteți lua o idee și un principiu de proiectare (în acest caz, tema combinării prospețimii energetice cu subtilitatea) și să o reprezentați în mod constant prin schema dvs. de culori, strategia de conținut și efectele de design avansate.

Cine nu iubește clasica groapă de minge? Folosind culorile clasice ale mărcii pe un fundal alb, Google lovește din nou aurul.

Cu un singur efect de urmărire a mouse-ului, Google reușește să realizeze o experiență de utilizator care face ca vizitatorul site-ului să se simtă de fapt ca într-o groapă de minge! Și când derulați pagina în jos, tot ce se întâmplă este ca bilele să devină mai mari. Nu există conținut sub bile, exact așa este în realitate.

Google reușește să ne ofere o înțelegere imediată, senzațională, pentru ce este acest produs și o fac cu o descriere simplă a titlului textului eroului și cu un buton CTA.

Știm că Google este pe cale să ne ajute să planificăm următoarea noastră aventură care nu ne va dezamăgi. Și ați văzut efectele de schimbare a culorilor când ați plasat deasupra butonului? Este pentru prima dată când vedem un buton al cărui efect de plutire se schimbă în patru culori separate, mai degrabă decât să se schimbe de la o culoare la alta.

Parcă nimic nu am mai văzut până acum. În fața ochilor noștri, vedem forme abstracte animate care se mișcă și formează o ilustrație a unui animal. Ne stârnește curiozitatea, admirând animalele frumoase și întrebându-ne, ce alte animale au folosit?

Acesta este exact procesul de gândire pe care doriți să îl aibă vizitatorul site-ului dvs. Îi spui o poveste vizuală și vrei să treacă la pagina următoare a acelei povești.

Dacă vă gândiți la asta, povestirea și cauza speciilor pe cale de dispariție au multe în comun: ambele se referă la atragerea atenției ascultătorului și la convingerea acestuia (deși subtil) că subiectul dvs. este de primă importanță, de asemenea merită ascultat.

Industria canabisului este încă destul de nouă și proaspătă, așa că este logic pentru un site web care îl vinde ca produs să aibă nevoie de un aspect și de o vibrație care să aibă același sentiment.

Să ne oprim să apreciem câte tehnici de proiectare se întâmplă doar pe pagina principală: un fundal de prezentare în spatele colecțiilor de imagini animate, efecte 3D, cuvinte rotative ... și totul arată frumos.

Cum ar putea cineva să vadă această pagină de pornire și să nu dorească să exploreze site-ul în continuare? Doar dacă faceți acest lucru, atunci puteți vedea animațiile care devin maxilare devenind și mai fabuloase pe măsură ce derulați în jos.

Ne place cum odată ce coborâți în jos, borcanul se rotește în jos, iar obiectele de pe fundalul colorat alunecă la marginile paginii pe măsură ce fundalul devine alb. Atat de creativ. Cu cât mergeți mai jos, cu atât mai multe obiecte 3D frumoase mențin un efect de derulare verticală în sus.

Toate aceste tehnici combinate creează o senzație de parcă vrei doar să continui și să citești mai multe site-uri web, chiar și doar pentru a vedea imagini fascinante și ceea ce au venit designerii.

Dacă navigați la celelalte pagini, veți vedea că obiectele 3D din conținutul erou al paginii de pornire au devenit o parte permanentă a fundalului, în timp ce plutesc și se mișcă. Această alegere a continuității permite o povestire holistică care atrage punctul mai aproape de casă: suntem un produs minunat.

Este schema de culori, designul 3D, mișcarea subevaluată a imaginii sau ilustrația cărții de credit care coboară într-o mișcare asemănătoare acrobatică în timp ce derulăm pagina de pornire?

Este un pic din toate.

Schema de culori aici merge mult. Nuanțele de portocaliu, înconjurate de mult spațiu alb și un font simplu, rotunjit, fără serif, toate funcționează împreună atât de holistic. Dar ceea ce ia cu adevărat tortul aici este tehnicile de animație utilizate pentru ilustrarea cardului de credit.

RappiPay primește votul nostru pentru originalitate și pentru un angajament remarcabil. Conținutul site-ului îl ghidează pe vizitator în josul paginii până când atinge fundul, deoarece pe măsură ce cardul de credit alunecă atât de lin pe pagină, acesta declanșează să apară alte imagini și ilustrații. Și între interacțiunea cardului de credit cu alte elemente, cum ar fi dezvăluirea facturilor de numerar sau trasarea liniilor punctate în jurul unei sfere, cardul prezintă clapete acrobatice până la capăt.

Așa cum cardul de credit spune povestea bine, plin de acțiune și vitalitate, se termină și el. Decupajul circular de la sfârșit, care arată achizițiile proprietarului cardului, ne arată cât de multe caracteristici și capabilități are acest card și cum proprietarul cardului a luat-o cu adevărat peste tot și oriunde.

Cuvintele minimalist și de ultimă generație sunt tot ce ne putem gândi aici. Dacă o imagine spune o mie de cuvinte, am spune că o imagine animată spune 5.000 sau probabil chiar mai mult.

OK, acum e rândul tău. Tehnicile de animație pe care le-am enumerat aici reprezintă doar o mică parte din ceea ce pot realiza creatorii de web atunci când adaugă funcții animate pe site-urile lor web. Din ce în ce mai multă inspirație devine disponibilă în fiecare zi și există atât de multe de văzut și de învățat. Motto-ul nostru ca designeri este să începem cu elementele de bază și, deoarece aveți practici simple de animație sub centură, site-ul dvs. web poate arăta lumii ce înseamnă să fii un mutant și un agitator.