Web design
Weby, které prodávají produkt a působí jako prostor.
Web
VisualCraft / sesterská společnost
Digitální ateliér.
Web, který dýchá 3D.
Pro sesterskou agenturu VisualCraft jsme postavili minimalistický high-end web s blueprint gridem a levitujícími prvky. Nově ho děláme tmavý, aby vynikla 3D práce a oslovil zahraniční klienty.
Zadání
Web, který vypadá jako to, co dělají.
VisualCraft je naše sesterská společnost. Je to digitální design agentura pro web, 3D a motion a sdílí s námi polovinu týmu. Web proto musel odpovídat tomu, co agentura dělá nejlépe: prostoru, hloubce a preciznosti.
Chtěli jsme, aby se návštěvník cítil jako v digitálním ateliéru, ne na běžné firemní stránce. A aby minimalismus byl vidět nejen na vzhledu, ale i v kódu.
Klient
VisualCraft
Sesterská společnost, sdílíme polovinu týmu
Obor
Web, 3D, motion
Digitální design agentura
Platforma
WordPress
Breakdance Builder
Verze
Světlá → tmavá
Redesign pro zahraniční klienty
Koncept
Minimalistický high-end. Žádná běžná firemní stránka.
Web musí „dýchat 3D prostorem“. Proto jsme omezili prvky na minimum, dali jim hloubku a nechali kolem nich vzduch. Všechno ostatní dělá práce samotné agentury.
U agentury, která prodává vizuální preciznost, je web první referencí. Návštěvník si udělá názor dřív, než otevře první projekt.
100+
Dodaných projektů
Hlavní myšlenka
Web není vizitka. Je to vstup do ateliéru.
Každý prvek má hloubku, každá interakce lehký pohyb. Návštěvník má mít pocit, že se v prostoru pohybuje, ne že čte stránku.
3D
Vizuální identita
Blueprint, který levituje.
První verze stála na jemné barvě, technickém podkladu a hloubce vytvořené stíny kolem každého důležitého prvku. Postupně z toho vznikl vizuální jazyk celého webu.
Čtverečkovaný grid působí jako výkres. Připomíná, že za každým renderem stojí konstrukce, a dává webu technický, přesný charakter.
Čistá barva
#FFF5F5
Luxusní, ale neagresivní. Základ první verze webu.
Technický grid
Blueprint
Jemné čtverečky, které podtrhují preciznost 3D designérů.
Všesměrový stín
Floating
Klíčové prvky levitují nad pozadím a vytvářejí hloubku.
Nová verze
Dark
Tmavé pozadí, na kterém 3D prvky konečně září.
floating
0 0
Offset bez směru
32px
Rozptyl stínu
Z+
Hover v ose Z
JAK PRVKY LEVITUJÍ
Z plochy do prostoru.
01
Stín kolem celého prvku
02
Jemný náklon při hoveru
03
Návrat bez trhnutí
Stín ve všech směrech zvedá prvek nad pozadí. Na tmavé verzi nese i jemnou záři.
Interakce / příběh čísel
Čísla, která se rozeběhnou.
Statistika úspěšných projektů nesmí být jen text. Při scrollu se čísla rozeběhnou jedno po druhém, s úvodní prodlevou 1 s a rozestupem 400 ms. Tak vzniká elegantní náběh.
Animace je napsaná v čistém JavaScriptu. Žádná knihovna, jen přesné časování a respekt k uživatelům, kteří mají pohyb vypnutý.
Let zkušeností
0+
Digitální produkty, značky a zážitky napříč obory.
Dodaných projektů
0+
Od krátkých kreativních zakázek po kompletní digitální řešení.
Zhlédnutí
0M+
Napříč kampaněmi, produktovým obsahem a značkovými zážitky.
01
Příběh čísel
Statistiky se při scrollu rozeběhnou. Prodleva 1 s a postupný náběh po 400 ms.
02
Responzivní navigace
Flexbox na malém displeji přeskládá prvky: tečky nahoru, tlačítka logicky pod ně.
03
Dotek 3D
3D prvky lehce reagují na pohyb myši transformací v ose Z.
Obsah / nabídka
Pět služeb, jeden partner.
Web musí v prvních vteřinách říct, co agentura dělá. Nabídku jsme proto rozdělili na čtyři jasné bloky a každý má vlastní vizuál, aby se v nich zákazník orientoval okamžitě.
3D videa
Rendery a animace produktů, interiérů a konceptů.
3D
Software
Platformy, nástroje a automatizace pod povrchem webu.
Software
Produktový design
Značka, produkt, 3D a motion v jednom vizuálním jazyce.
Design
Technické parametry
Lehký web, čistý kód.
Minimalismus nemá být jen vizuální. Web je postavený na WordPressu s Breakdance Builderem, takže si obsah může spravovat tým bez vývojáře, ale pod povrchem je vlastní kód bez zbytečných knihoven.
01
WordPress + Breakdance
Maximální flexibilita při správě obsahu. Tým si web upraví sám.
02
Stejně vysoké bloky
align-items: stretch drží prvky v řadě ve stejné výšce bez ohledu na obsah.
03
Čistý JavaScript
Žádné těžké knihovny. Animace běží na stabilních 60 FPS.
04
Lehký a rychlý
Minimalismus je i v kódu: málo závislostí a krátké načítání.
Redesign
Tmavší, víc 3D, pro celý svět.
Agentura se posunula a web s ní. Nová verze je tmavá, 3D prvky na ní vynikají víc a obsah míří i na zahraniční klientelu. Struktura a materiály vycházejí z visualcraft.studio.
Tmavé pozadí není jen styl. Na světlé stránce vypadají rendery jako obrázky, na tmavé jako objekty, které v prostoru skutečně jsou.
Dark režim
Tmavý
3D prvky a rendery dostávají kontrast, který na světlém pozadí nemají.
Zahraniční klientela
EN
Web míří na klienty z Londýna, New Yorku i Los Angeles včetně rezervace hovoru.
Jeden partner
1×
Brand, web, 3D, motion a software, srozumitelně od prvního kontaktu.
FPS
60
Plynulé animace, bez ztráty výkonu navzdory tmavému a bohatšímu designu.
Pro koho / obory
Postavené pro každý obor.
Zahraniční klienti hledají zkušenost v jejich oboru. Proto web ukazuje, jak 3D, motion a software pomáhají v pěti odvětvích.
01
Technologie a AI
Dashboardy a produktové weby, které zjednoduší složitý software.
02
Reality a development
3D exteriéry, interiéry a průlety pro rychlejší poptávku.
03
Finance a trading
Důvěryhodné rozhraní, které mění data v jistotu.
04
Retail a e-commerce
Produktové rendery a motion pro placené sociální sítě.
05
Logistika
Mapy, stavy a reporty, které z dat dělají srozumitelný obraz.
Tým
Sdílená půlka týmu.
VisualCraft a Virtuex sdílejí zhruba polovinu lidí. Díky tomu kreativa, 3D a vývoj nepřecházejí mezi týmy, ale pracují spolu od prvního náčrtu.
Adam Darázs
Co-founder, vedení projektů
Jacob Feuerstein
Co-founder, kreativa
Bishal Khadka
3D a animace
Jiří Kolb
Vývoj
Filip Solský
Software a AI
Šimon Čermák
Video
Průběh spolupráce
Od atmosféry po tmavý redesign.
Protože jde o sesterskou firmu, designéři a vývojáři pracovali přímo s lidmi, kteří web používají každý den. Rozhodnutí padala rychle a bez zdlouhavých schvalování.
01
Atmosféra
Workshop o tom, jak má působit digitální ateliér. Paleta, grid a první moodboardy.
02
Design
Minimalistický high-end design s floating prvky a 3D akcenty.
03
Stavba
WordPress s Breakdance, vlastní JavaScript, animace čísel a 3D hover efekty.
04
Redesign
Tmavá verze, anglický obsah a důraz na 3D práci a reference.
Co měl web zvládnout
Okouzlit,
přesvědčit,
být rychlý.
Prostor
Návštěvník se cítí jako v ateliéru, ne na firemní stránce.
Důvěra
Čísla, reference a jasná nabídka pro zahraniční klienty.
Rychlost
Lehký kód a plynulé animace bez těžkých knihoven.
KONTAKT
Pojďme se potkat
Máte nápad? Vyberte si termín pro společný rozhovor, nebo nám napište. Společně najdeme cestu k vašemu digitálnímu projektu.
Odesláním berete na vědomí zpracování osobních údajů.
Zásady zpracování osobních údajů