3D modely produktov
Model, ktorý spojí produkty do celku alebo ukáže, čo je vo vnútri, napríklad potrubný systém alebo stroj.
Animácie · 3D · pohyb na webe
Pokročilé animácie a3D na web
Pokročilé animácie na webe sú pohyblivé prvky, 3D modely a efekty pri skrolovaní, ktoré návštevníkovi ukážu produkt alebo proces rýchlejšie ako text. OWI ich navrhne, vymodeluje a nasadí tak, aby web ostal rýchly aj na mobile.
Čo to znamená
Technické produkty a dáta sú často abstraktné. 3D vizuál ich rozloží do vrstiev alebo ukáže, čo je vo vnútri, takže odborník aj laik pochopí na prvý pohľad, čo firma robí. Animácia má vysvetľovať. Keď len zdobí, spomaľuje.
Pre
Technické a výrobné firmyProdukt je v zemi, v stroji alebo v dátach a fotka ho neukáže celý.
Pre
Značky, ktoré chcú zaujať v úvodePrvá obrazovka má okamžite povedať, čím sa líšite.
Pre
Firmy so zložitým procesomPotrebujete vysvetliť postup v niekoľkých krokoch bez dlhých odsekov.
Čo dostanete
Aké animácie robíme
Vyberáme techniku podľa toho, čo má pohyb ukázať.
Animácie pri skrolovaní
Obsah sa skladá a mení podľa toho, ako návštevník číta stránku.
Ľahké vektorové animácie
Ikony a ilustrácie v pohybe, ktoré majú len pár kilobajtov.
Reakcie na kurzor
Tlačidlá, karty a písmo, ktoré reagujú na pohyb myši.
UX/UI dizajn →Video na webe
Krátke slučky a úvodné video nastavené tak, aby sa načítali až vtedy, keď ich treba.
Video spoty a kampane →Optimalizácia pre mobil
Na mobile jednoduchšie efekty a ťažké prvky až po prvej interakcii.
Postup
Ako vzniká animácia na web
- 01
Čo má pohyb vysvetliť
Najprv určíme jednu myšlienku, ktorú má animácia odovzdať.
- 02
Storyboard
Nakreslíme hlavné momenty pohybu a schválite ich pred modelovaním.
- 03
Modelovanie a animácia
3D špecialisti pripravia model, animátori pohyb a vývojár ho nasadí do webu.
- 04
Ladenie rýchlosti
Meriame výkon na mobile a desktope a upravujeme, kým web nie je plynulý.
Časté otázky
Na čo sa nás pýtate
Kde na webe sa animácia oplatí ako prvá?
V úvode a pri produkte, ktorý sa ťažko vysvetľuje. Jedna dobrá animácia v prvej obrazovke spraví viac ako desať malých efektov všade. Ostatné sekcie môžu mať jemný pohyb pri skrolovaní.
Nespomalia animácie web?
Môžu, ak sa nasadia bez rozmyslu. Preto ťažké prvky načítavame až po zobrazení stránky, videá až keď sa k nim návštevník priblíži a na mobile používame jednoduchšie verzie. Rýchlosť meriame pred spustením.
Aký je rozdiel medzi 3D animáciou a Lottie?
3D pracuje s priestorovým modelom, ktorý sa dá otáčať a rozkladať. Lottie je ľahká vektorová animácia vhodná na ikony a ilustrácie. Často ich kombinujeme na jednom webe.
Potrebujem na 3D model technické výkresy?
Pomôžu, ale nie sú nutné. Model vieme pripraviť aj z fotografií a popisu produktu. Presnosť dohodneme podľa toho, čo má model ukázať.
Dajú sa animácie pridať aj do existujúceho webu?
Áno, ak to technika webu dovolí. Najčastejšie začíname úvodnou sekciou alebo produktovou stránkou. Pri starších weboch najprv overíme, či sa animácia nezačne biť so šablónou.
Weby a aplikácie
Ďalšie kapitoly piliera
Každá služba má vlastnú podstránku s postupom a otázkami.
01Firemné weby na mieruWeb navrhnutý podľa toho, ako vaša firma predáva, s obsahom, ktorý si spravujete sami.→02Webové aplikácieInterné nástroje a klientske portály, ktoré nahradia tabuľky a preposielanie mailov.→03Headless WordPressZnáma administrácia WordPressu a rýchly web vykreslený vopred.→04UX/UI dizajnŠtruktúra a rozhranie, v ktorom sa zákazník zorientuje bez návodu.→05Pokročilé animácieSte práve tu●06Web pre AI vyhľadávanieWeb, ktorý vidia a vedia citovať Google aj ChatGPT.→07Správa a servisAktualizácie, zálohy a bezpečnosť, aby web fungoval aj roky po spustení.→
Súvisí aj s
AI diagnostika
Mám záujemZa päť dní viete, kde vám AI pomôže najviac
Workshop s Braňom a Jankou, na mieru vašej firme. Odnesiete si mapu procesov a poradie krokov.