Kuchyně v dubu
Masivní dub, skryté úchytky, pracovní deska z kompaktu. Návrh, výroba i montáž od jednoho dodavatele.
3D a motion design pro weby
Produkt, který si zákazník otočí a sestaví, a pohyb, který vychází ze značky a vede k tomu důležitému. Stavíme je tak, aby web zůstal rychlý a vyhledávače ho dál dobře hodnotily. Ukázky na této stránce běží živě.
Logo z desítek tisíc částic
Mlhovina bodů se složí do loga, pak do nápisu, planety a galaxie. Každý bod počítá grafická karta, takže scéna běží plynule i na běžném notebooku. Pohněte myší nad scénou nebo do ní klikněte.
Stejná technika vykreslí tvar produktu, mapu poboček nebo graf z tisíců záznamů. Na telefonu kreslíme méně bodů, aby scéna nevybíjela baterii.
Pohybový jazyk značky
Než se něco pohne, dohodneme pravidla. Tři zásady, podle kterých se hýbe celý web, od tlačítka po přechod sekce. Hodnoty jsou skutečné, stejné jsou v CSS tohoto webu.
-
Jedna křivka pro všechno
Rychlý rozjezd, měkké dosednutí:
cubic-bezier(.16, 1, .3, 1). Pohyb působí pohotově, ale nikdy necuká. Šedá tečka jede lineárně pro srovnání. -
Tři délky, žádné další
Drobné reakce trvají 150 až 200 ms, velké změny 500 ms. Delší animace by návštěvníka zdržovala, kratší by si nevšiml.
-
Kurzor vede oko
Kurzor z loga je hlavní postava. V animacích ukazuje, kam se dívat a co je klikací, stejně jako by to udělal člověk u počítače.
Od prázdného okna k hotovému webu
Scrollová choreografie: okno prohlížeče z našeho loga se při scrollu samo poskládá do webu. Takhle se dá vyprávět, jak pracujete, jak vzniká produkt nebo co zákazník dostane.
- 1/4
Mřížka
Každý web začíná sítí sloupců. Drží zarovnání a rytmus na všech šířkách.
- 2/4
Rozvržení
Kurzor rozloží bloky: navigaci, hlavní sdělení, fotku a nabídku. Pořadí určuje, co návštěvník uvidí první.
- 3/4
Obsah
Drátěný model dostane skutečné texty, barvy a fotku. Animace ukazuje, odkud se co bere.
- 4/4
Mobil
Okno se zúží na telefon a stejné bloky se přeskládají pod sebe. Nic se neztratí.
Poptat
Kuchyně na míru z masivu
Navrhneme, vyrobíme a namontujeme do šesti týdnů.
Nezávazná poptávka
Kuchyně
Vestavby
Schody
Kinetická typografie
Písmo, které
reaguje na scroll.
Inter Tight je proměnné písmo: tloušťka se plynule mění od 600 do 900. Vlna tloušťky jde po písmenech podle toho, jak scrollujete.
Mikrointerakce, které něco říkají
Krátká odpověď na každou akci: odesílá se, chyba, hotovo. Vyzkoušejte si je, jsou to skutečné prvky, jen nic neodesílají.
Odeslání formuláře
Tlačítko se změní v indikátor, takže nejde odeslat dvakrát, a potvrzení přijde na stejném místě, kam se člověk dívá.
Kontrola e-mailu
Chyba se ukáže až po dopsání, ne při prvním písmenu, a říká, co opravit. Správná adresa dostane tichou fajfku.
Karta a detail
Karta se rozbalí na místě. Oko neztratí, kde byla, a návrat zpět je stejně plynulý.
Co pro vás postavíme
3D ani animace nejsou ozdoba na každý web. Vyplatí se tam, kde prostor nebo pohyb vysvětlí produkt a značku líp než fotka a text.
- 3D konfigurátor produktu
- Nábytek, kuchyně, okna nebo stroje: zákazník si sestaví vlastní variantu, vidí ji ze všech stran a zná cenu dřív, než vám napíše. Vyzkoušejte si ho na úvodní stránce.
- Prezentace produktu ve 3D
- Výrobek, který jde otočit, rozložit na díly nebo nasvítit. Hodí se pro technické produkty, design i luxusní zboží.
- Animované logo a intro značky
- Krátká animace z tvarů vašeho loga pro web, video i sociální sítě. Dodáme SVG animaci, video a Lottie.
- Scrollové příběhy
- Sekce, které se skládají podle scrollu: jak vzniká produkt, jak probíhá spolupráce, co je uvnitř. Jeden takový je na úvodní stránce.
- Mikrointerakce a přechody
- Tlačítka, formuláře, načítání a přechody stránek, které odpovídají značce a návštěvníka nenechají v nejistotě.
- Kdy ne
- U webu, kde lidé hlavně hledají telefon, ceník nebo otevírací dobu, by 3D jen zdržovalo. Tam vám ho rovnou rozmluvíme.
3D a pohyb, které nebrzdí
- Obsah je HTML. Nadpisy, texty a odkazy jsou v kódu stránky, ne ve scéně. Vyhledávač i čtečka obrazovky je přečtou celé.
- 3D a animace se načítají až po obsahu. Knihovny stahujeme, až když se stránka zobrazí, a 3D scénu teprve tehdy, když k ní návštěvník doscrolluje.
- Animujeme to, co je levné. Posun, průhlednost a ořez počítá grafická karta, takže pohyb drží plynulost i na starším telefonu.
- Nic se neděje mimo obrazovku. Scéna mimo obrazovku nebo ve skryté záložce se nevykresluje a nevybíjí baterii.
- Respektujeme nastavení. Při omezení pohybu v systému nebo na webu se vše zobrazí rovnou v klidovém stavu.
- Záložní verze. Bez podpory WebGL se zobrazí běžná stránka se stejným obsahem.
Na co se ptáte
Zpomalí 3D a animace web?
Nemusí. Obsah stránky zůstává obyčejné HTML, které se načte a zobrazí jako první. Animace a 3D scény stahujeme až potom, animujeme jen to, co prohlížeč zvládá na grafické kartě, a mimo obrazovku se nic nepočítá. Rychlost načtení ani SEO neutrpí.
Funguje to na mobilu a starších zařízeních?
Ano. Na telefonech vykreslujeme méně částic a v nižším rozlišení a ovládání přizpůsobujeme dotyku. Když scéna nestíhá, sama sníží kvalitu. Když zařízení 3D nepodporuje, návštěvník uvidí běžnou verzi stránky se stejným obsahem.
Co když návštěvník animace nechce?
Kdo má v systému zapnuté omezení pohybu nebo animace vypne na webu, uvidí všechno rovnou v klidovém stavu a 3D scény se nespustí samy. Žádná informace není schovaná jen v animaci.
Potřebujeme vlastní 3D modely?
Záleží na zadání. Abstraktní scény, částice nebo efekty v hlavičce vznikají přímo v kódu, bez modelů. Pro konfigurátor konkrétních produktů použijeme vaše CAD nebo 3D podklady, případně modely nechá připravit 3D grafik.
Umíte animovat naše logo?
Ano. Logo rozložíme na tahy a tvary a postavíme z nich krátké intro, které se dá použít na webu, ve videu i na sociálních sítích. Dodáme ho jako SVG animaci, video a případně Lottie.
Jde to přidat do stávajícího webu?
Většinou ano. Konfigurátor, animované logo nebo scrollovou sekci přidáme do hotového webu jako samostatný modul, bez předělávání zbytku.
Kolik to stojí?
Záleží na rozsahu: animované logo je jiná zakázka než konfigurátor napojený na ceník. Cenu určíme po úvodní konzultaci zdarma a dostanete ji písemně předem.
Máte produkt nebo značku, které by pohyb pomohl?
Pošlete nám odkaz na web nebo popište produkt pár větami. Na konzultaci zdarma řekneme, kde by 3D nebo animace pomohly a kde by jen zdržovaly.
- info@webmastersweby.cz
- +420 777 334 988
- Odpovídáme do dvou pracovních dnů.