Nový web a branding

Škola boje a přežití

S radostí představuji nový web Škola boje a přežití, který jsem měl tu čest navrhnout a vytvořit. Za projektem stojí Jirka Hecl, instruktor sebeobrany a přežití s dvacetiletou praxí u výsadkových jednotek AČR. Přišel s jasnou vizí kurzů, ale bez loga a vizuálního stylu. Postavili jsme tak celou značku i web od nuly.

Přejít na web

Jak spolupráce začala

S Jirkou se známe z tréninků boxu ve Fight Gymu Chrudim, pro který jsem dělal web. Právě přes něj mě Jirka oslovil ve chvíli, kdy se rozhodl začít nabízet vlastní kurzy sebeobrany a přežití pod svým jménem. To považuji za nejlepší možnou vizitku: doporučení od klienta, který na výsledek denně kouká.

Začali jsme společnou konzultací nad tím, co Jirka od webu očekává a čeho chce dosáhnout. Nešlo jen o soupis stránek. Bavili jsme se o tom, komu chce kurzy nabízet, čím se liší od ostatních a co má návštěvník na webu udělat. Z toho vznikla struktura webu postavená kolem katalogu kurzů, který jde filtrovat podle typu, ať už jde o školení pro firmy, tréninky pro veřejnost, nebo vícedenní kurzy přežití v Krušných horách.

Rychle se ukázalo, že projekt bude větší, než se na první pohled zdálo. Jirka do té doby neřešil, jak má jeho škola vypadat navenek. Neměl logo ani vizuální styl, ze kterého by šlo při návrhu webu vycházet.

Od nuly k vlastní značce

Než mohl vzniknout jakýkoliv návrh webu, bylo potřeba vytvořit vizuální identitu. Pro Jirku to byla neznámá disciplína, takže jsem mu s návrhem loga rovnou pomohl.

Vycházel jsem z toho, co je pro školu charakteristické: armádní zázemí, praxe a řemeslná poctivost. Jako výchozí koncept jsem zvolil styl vojenské nášivky, který funguje stejně dobře na webu, na tričku i jako skutečná výšivka na výstroji. S přípravou variant mi pomohla umělá inteligence Google Gemini, díky které jsme mohli během krátké doby projít výrazně víc směrů, než by bylo běžně reálné, a společně vybrat ten, se kterým se Jirka ztotožnil.

Výsledkem je logo a barevná i typografická linka, která pak určila podobu celého webu. Jirka tak z jedné spolupráce získal nejen web, ale i vlastní značku.

Logo vzniklo ve dvou variantách. Primární barevná verze slouží pro web a online komunikaci, sekundární je návrh pro reálnou výšivku na výstroj a oblečení.

Grafický návrh webové aplikace

Na základě schváleného loga vznikl kompletní grafický návrh ve Figmě. Design pracuje s tlumenou vojenskou barevností, výraznou typografií a fotografiemi z reálných výcviků, aby web na první pohled komunikoval, o čem kurzy jsou. Zároveň zůstává čistý a přehledný, protože hlavní roli hraje obsah a informace o jednotlivých kurzech.

Zvláštní pozornost jsem věnoval mobilní verzi. Většina zájemců si web otevře na telefonu, typicky poté, co narazí na příspěvek na sociálních sítích. Cesta od úvodní stránky přes detail kurzu až k poptávkovému formuláři proto musí být na mobilu naprosto plynulá.

Návrh ve Figmě zároveň dal Jirkovi možnost vidět celý web ještě předtím, než se napsal jediný řádek kódu. Připomínky se řešily nad návrhem, kde jsou změny rychlé a levné, ne až nad hotovou aplikací.

Vývoj, ladění obsahu a spuštění

Po schválení návrhu jsem se pustil do vývoje. Web běží na Next.js s administrací ve Strapi, takže si Jirka může sám přidávat nové kurzy, upravovat termíny i texty a web s ním může růst, jak bude nabídka přibývat.

Finální fáze se hodně točila kolem obsahu. Společně jsme procházeli texty jednotlivých kurzů a ladili je tak, aby byly srozumitelné i pro člověka, který se sebeobraně nikdy nevěnoval. Doplnili jsme rovněž praktické náležitosti, které kurzy pro veřejnost potřebují, jako jsou storno podmínky, prohlášení o odpovědnosti a zpracování osobních údajů. Vedle toho jsme doladili drobné funkční detaily, například chování filtrů v katalogu kurzů a poptávkové formuláře.

Po otestování jsme web spustili. Výsledkem je rychlý a technicky kvalitní web s dobrými hodnotami Core Web Vitals a základní SEO optimalizací, takže je dohledatelný pro lidi, kteří kurz sebeobrany aktivně hledají. Jirka od té doby dostává na web pozitivní ohlasy od svého okolí.

Core Web Vitals jsou klíčové ukazatele kvality webu, které sledují rychlost načítání, odezvu na akce uživatele a stabilitu obsahu při načítání. Když jsou tyto parametry v pořádku, web je uživatelsky přívětivý a lépe hodnocený ve vyhledávačích.

Jak spolupráci hodnotí Jirka?

Kubu Vávru jsem oslovil na základě velice kladného doporučení sportovního klubu Fight Gym Chrudim, jehož stránky dlouhodobě spravuje. Byl jsem nadmíru spokojený s aktivním přístupem a kreativitou, se kterou se do tvorby webu pustil. Pohotově reagoval na připomínky a řešil se mnou spoustu věcí nad rámec IT tak, aby web získal moderní design a byl uživatelsky přívětivý. Vysoká kvalita za skvělou cenu, mohu jen doporučit!

Jiří Hecl

Škola boje a přežití

Použité technologie a nástroje

Při vývoji jsem využil moderní technologie a ověřené nástroje s aktivní komunitní podporou. Díky nim jsou projekty stabilní, bezpečné a snadno rozšiřitelné. Každý z nich stavím na pevných základech, které zaručují dlouhodobou kvalitu a spolehlivost.

Next.js

Next.js je výkonný framework pro React, který umožňuje snadno vytvářet moderní webové aplikace s podporou server‑side renderingu, statického generování a dalších pokročilých funkcí.

Strapi

Strapi je open‑source headless CMS, které umožňuje snadnou správu obsahu a poskytuje flexibilní API pro rychlou integraci s webovými a mobilními aplikacemi.

Cloudinary

Cloudinary je platforma pro správu, optimalizaci a doručování médií, která umožňuje snadnou práci s obrázky, videi a dalšími soubory pro webové a mobilní aplikace.

Vercel

Vercel je platforma pro nasazování a škálování webových aplikací, která nabízí rychlé buildy, serverless funkce a optimalizaci výkonu pro moderní front‑end projekty.

DigitalOcean

DigitalOcean je cloudová platforma, která vývojářům a firmám nabízí jednoduché a škálovatelné nástroje pro správu infrastruktury a nasazení aplikací.

Neon

Neon je moderní cloudová platforma pro PostgreSQL, která nabízí škálovatelné, serverless databáze s integrovaným automatickým ukládáním do archivu a nástroji pro správu dat.

Figma

Figma je cloudový nástroj pro design a prototypování, který umožňuje týmům spolupracovat v reálném čase na tvorbě uživatelských rozhraní a grafických návrhů.