Fitness

Landing page

Landing page

Landing page

Petr Novotný

Petr Novotný

Petr Novotný

2025

2025

Hlavní náhled landing page Fitness Novotný — úvodní hero sekce zobrazená na notebooku.
Hlavní náhled landing page Fitness Novotný — úvodní hero sekce zobrazená na notebooku.
Hlavní náhled landing page Fitness Novotný — úvodní hero sekce zobrazená na notebooku.

Fitness Novotný

Tento projekt vznikl jako UX/UI koncept landing page pro osobního trenéra. Cílem nebylo vytvořit hotový komerční produkt, ale navrhnout a dotáhnout jednoduchou landing page až do reálně fungující podoby — od návrhu ve Figmě až po nasazení ve Frameru.

Stránka je reálně dostupná online a slouží jako funkční ukázka návrhu, nikoliv jako produkční projekt s ověřenými výsledky. Neproběhlo uživatelské testování ani sběr dat, rozhodnutí proto vycházejí z UX principů, běžných konverzních patternů a osobních hypotéz.

Projekt beru jako koncept a praktické cvičení, jehož cílem bylo ověřit si přechod od návrhu k reálnému webu, ne jako finální byznys řešení.

Landing page Fitness Novák zobrazená na iMacu v reálném pracovním prostředí.
Landing page Fitness Novák zobrazená na iMacu v reálném pracovním prostředí.

Proč jsem zvolil stránku bez navigace

Hned na začátku jsem se rozhodl nepoužít klasickou navigaci.

Důvod byl jednoduchý: stránka má jen jeden cíl – nabídnout krátký cvičební plán a získat e-mail. Jakákoliv další navigace by uživatele spíš odváděla jinam, než aby mu pomohla rozhodnout se.

U takto krátké landing page:

  • nemá uživatel kam „jít“

  • navigace by vytvářela zbytečné rozptylování

  • celý obsah lze projít lineárně bez přemýšlení

Je to přístup, který se u konverzních stránek často používá. Zároveň je ale potřeba říct, že v tomto případě nebyl ověřený testováním a vychází čistě z best practices.

Návrh struktury landing page Fitness Novák — grid s jednotlivými UI sekcemi a rozvržením obsahu.
Návrh struktury landing page Fitness Novák — grid s jednotlivými UI sekcemi a rozvržením obsahu.

Co by nemuselo fungovat

Protože jde o koncept bez testování, některá rozhodnutí by v praxi nemusela fungovat ideálně.

Budování důvěry
Stránka je hodně jednoduchá a neposkytuje moc prostoru pro hlubší představení trenéra nebo reference. U části uživatelů to může vyvolat pocit, že nemají dost informací k tomu, aby e-mail opravdu zadali.

Silný fokus na jednu akci
Celá stránka tlačí na jediný krok. To může fungovat u lidí, kteří už problém aktivně řeší, ale může to odradit ty, kteří by si chtěli nabídku nejdřív „osahat“ nebo si o ní zjistit víc.

Hodnota „3 minuty“
Krátký trénink je jasné a zapamatovatelné sdělení, ale bez dat nelze říct, jestli na cílovou skupinu působí motivačně, nebo naopak příliš zlehčuje celý koncept.

Detail jedné ze sekcí landing page Fitness Novák zobrazený na notebooku jako součást návrhového procesu.
Detail jedné ze sekcí landing page Fitness Novák zobrazený na notebooku jako součást návrhového procesu.

Návrh & realizace

Návrh landing page jsem připravoval ve Figmě, kde jsem řešil strukturu stránky, hierarchii obsahu a základní vizuální styl.

Výslednou stránku jsem následně realizoval ve Frameru, abych si ověřil, jak návrh funguje jako skutečný web — včetně responzivity, práce s layoutem a interakcemi.

Projekt jsem nebral jen jako statický design, ale jako funkční prototyp, který lze otevřít a projít v prohlížeči.

Mobilní a tabletová verze landing page Fitness Novák — ukázka responsivního uživatelského rozhraní.
Mobilní a tabletová verze landing page Fitness Novák — ukázka responsivního uživatelského rozhraní.

Jak bych v projektu pokračoval dál

Pokud by šlo o reálný projekt, dalším krokem by nebyl redesign, ale ověření hypotéz:

  • rychlé testování s několika lidmi z cílové skupiny

  • ověření, jestli absence navigace skutečně pomáhá

  • test různých variant hlavního sdělení v hero sekci

Teprve na základě těchto zjištění by dávalo smysl návrh dál upravovat.

Finální podoba landing page Fitness Novák prezentovaná v prémiovém mockupu na Iphone.
Finální podoba landing page Fitness Novák prezentovaná v prémiovém mockupu na Iphone.