HRTiho
Pokret u zaglavlju
Simbol se malo okrene ili pomakne kad miš prijeđe preko njega.
Animacija logotipa za web stranicu: gdje pomaže i kako je napraviti.
Dobra animacija logotipa je kratka, tiha i brzo se učita. Evo gdje je koristiti, a gdje ne.
Animaciju logotipa koristite na malim mjestima: kratko pojavljivanje kod otvaranja stranice, pokret kad miš prijeđe preko logotipa u zaglavlju, ili kod učitavanja. Neka traje kraće od 2 sekunde i nikad ne tjera ljude da čekaju.
Koristite laganu vektorsku datoteku kao SVG ili Lottie, ili kratki video bez zvuka. Poštujte postavku "smanji pokret". Ispod je šest ideja, formati, pravila i brief koji pošaljete dizajneru.
Autor Vedran Obradović · Ažurirano 05.11.2026.
Šest ideja za animaciju logotipa na webu.
Od tihih do glasnih. Većina B2B stranica treba one tihe.
Tiho
Iscrtavanje
Linije logotipa se jednom same nacrtaju kod otvaranja stranice.
Tiho
Učitavanje
Simbol lagano pulsira dok se spori dio stranice učitava.
Srednje
Slaganje
Dijelovi logotipa klize na svoje mjesto.
Srednje
Veliki znak
Velika verzija simbola polako se miče iza naslova.
Glasno
3D logo
Znak se okreće u 3D dok skrolate. Odlično za lansiranje proizvoda.
Glasan pokret treba brz web ispod sebe. Pogledajte primjere 3D web stranica i moju uslugu 3D web stranice.
Koji format datoteke koristiti.
Odaberite najlakšu datoteku koja radi posao.
| Format | Dobar za | Pazite na |
|---|---|---|
| SVG s CSS-om | Pokret pod mišem, iscrtavanje, jednostavni pokreti | Složen pokret se teško radi |
| Lottie | Gladak vektorski pokret iz After Effectsa | Treba mali player |
| MP4 ili WebM video | Bogat pokret, 3D, teksture | Veća datoteka, neka bude kratak i bez zvuka |
| GIF | Mail i mjesta bez videa | Težak i mutan, na webu ga izbjegavajte |
| WebGL ili 3D | Logo koji možete okretati | Treba dobru izradu i rezervu |
Brand OS Portal
Dobijte 3 predloška u svom brendu. Besplatno.
Ostavite e-mail. Ručno ih dizajniram i šaljem vam u roku od 48 sati. Ne košta vas ništa.
Primio sam. Danas krećem s vašima. Vaša 3 besplatna predloška stižu vam u roku od 48 sati.
Javljam vam se s [email protected]. Ako ne vidite poruku, provjerite spam.
Pet pravila za pokret logotipa na webu.
Pokret treba izgledati kao vaš brend, ne kao predložak.
1. Neka bude kratko. Kraće od 2 sekunde za pojavljivanje, kraće od pola sekunde za pokret pod mišem.
2. Nikad ne blokirajte stranicu. Ljudi moraju moći čitati i klikati dok animacija traje. Logo koji tjera na čekanje tjera i ljude.
3. Poštujte "smanji pokret". Neki ljudi isključe pokret u postavkama uređaja. Stranica to može pročitati i pokazati mirni logo.
4. Ne vrtite ga beskonačno. Sadržaj koji se miče dulje od 5 sekundi uz drugi sadržaj treba način da se zaustavi. To je osnovno pravilo pristupačnosti (WCAG 2.2.2, razina A).
5. Mičite se kao brend. Miran brend se miče sporo i glatko. Oštar brend brzo i čisto. Zapišite to u pravila.
Pravila za pokret pripadaju u pravila brenda, uz pravila korištenja logotipa. Pogledajte što sadrži knjiga grafičkih standarda.
Besplatni alat
Je li brend iza logotipa jak?
Pokret čini jak brend jačim. Slab brend ne može popraviti. Odgovorite na par pitanja i dobijte ocjenu brenda.
Brief za animaciju logotipa koji pošaljete dizajneru.
Kratki briefovi daju bolji pokret. Ispunite ovaj.
Brief za animaciju logotipa
Brend: [ime], web stranica: [URL] Gdje se vrti: [otvaranje stranice / pokret u zaglavlju / učitavanje / naslovni dio] Trajanje: [kraće od 2 sekunde / kraće od 0,5 sekunde za pokret pod mišem] Osjećaj: [3 riječi, npr. mirno, precizno, sigurno] Kako se miče: [sporo i glatko / brzo i oštro] Datoteke koje imam: [logo SVG / AI / After Effects] Datoteke koje trebam natrag: [SVG + CSS / Lottie JSON / MP4 + WebM], plus mirna verzija Mora: raditi sa "smanji pokret", nikad ne blokirati stranicu, bez beskonačne petlje Ne želim: [odskakivanje, glitch, vrtnju, zvuk] Primjeri koji mi se sviđaju: [2-3 linka]
Pošaljite ga uz datoteke logotipa. Pogledajte što znači logo u vektoru. A najmanja verzija logotipa ima svoja pravila, pogledajte kako napraviti favicon iz logotipa.
Vaša checklista za animaciju logotipa.
Označite što je točno. Oznake ostaju na ovom uređaju.
0 od 8 gotovo
MTG
Brand OS Pro Portal. Tim sam radi svoje objave. Bez čekanja.
Deepsea Networks
Brand OS Core Portal. Direktor napiše i složi LinkedIn objavu u brendu za oko 3 minute.
Želite web s pokretom koji paše brendu? Pogledajte moju uslugu Framer web stranice. Brend i web traju 21 dan.
Motion Posts
Isprobajte jedan alat iz Brand OS Portala
Pokret u brendu, bez motion dizajnera.
Ovo je pravi alat iz pravog Brand OS Portala, na brendu MTG. Upišite rečenicu. Dobijete video objavu u brendu.
Kratki odgovori.
Treba li moja web stranica animaciju logotipa?
Samo ako je kratka i ne usporava stranicu. Malo pojavljivanje ili pokret pod mišem dodaju život. Dugi uvod tjera ljude.
Koliko dugo treba trajati animacija logotipa?
Kraće od 2 sekunde za pojavljivanje i kraće od pola sekunde za pokret pod mišem.
Koji je format animacije logotipa za web dobar?
SVG s CSS-om za jednostavne pokrete, Lottie za gladak vektorski pokret, i kratki MP4 ili WebM bez zvuka za bogat pokret.
Je li GIF logo dobar za web?
Obično nije. GIF je težak i mutan. Koristite SVG, Lottie ili video.
Može li AI napraviti animaciju logotipa?
AI video alati mogu dati grube ideje. Za gotovu datoteku trebate čist vektorski pokret koji prati pravila brenda.
Ne morate mi vjerovati na riječ.
"He is a brand magician; he understood the challenge quickly and delivered a brand identity, complete with motion graphics, messaging, etc."
Leah MarsdenCMO, MTG
"It was never really about creating one logo. It was about building something strong enough to grow with the company."
Pierre-Marc NoëlFounder & CEO, Deepsea Networks
"The brand looks premium and actually fits an AI / tech company, and the guidelines are so clear our team just uses them without asking questions."
Jeremy MurrayFounder, KORDIN and Stack8s
Koliko je jak vaš brend? Provjerite besplatno.
Dobijte ocjenu brenda i prvu stvar koju treba popraviti.
Radije mi pišete?
Primio sam.
Javljam vam se za 2 do 8 sati.