Vagrant: jednostránkový web pro značku střešních stanů

Zadání

Klient chtěl moderní jednostránkový web pro značku střešních stanů Vagrant — něco, co přehledně ukáže produkt, filozofii značky a hlavní výhody. Měl být responzivní a vizuálně vystihnout outdoorový charakter značky.

Za tím zadáním je ale konkrétnější problém, a ten rozhodl o celém webu: většina lidí netuší, že střešní stan existuje. Není to e-shop s botami, kde návštěvník ví, co chce, a vybírá velikost. Tady se musí nejdřív vysvětlit, co to je, jak se to na auto dostane a proč by to někdo chtěl.

Proč jedna stránka

Jednostránkový web má pověst levné varianty. Není to pravda — je to varianta pro jiný druh rozhodnutí.

Vagrant sedí do levého sloupce ve všech řádcích. Jeden produkt, nepoučený návštěvník, jedno rozhodnutí, obsah nepřibývá. Kdyby přidali druhou a třetí řadu stanů, bylo by to rozhodnutí jiné.

Jak je stránka poskládaná

Pořadí sekcí není estetika, je to scénář. U produktu, který člověk nezná, vypadá takhle:

1. Co to je — na první obrazovce

   Ne slogan. Fotka auta se složeným stanem a věta, ze které je okamžitě jasné, o čem se bavíme. Když tohle člověk nepochopí za pár sekund, zbytek stránky se nestihne.

2. Kdo za tím stojí

   U rodinné firmy je to argument, ne zdvořilost. Lidé kupují věc, kterou si nemohou osahat, od někoho, koho neznají — jméno a tvář to rozhodnutí reálně mění.

3. Galerie

   Tady se prodává. Stan v provozu, na autě, v terénu. Fotka složeného výrobku na bílém pozadí tohle nezvládne, protože nevysvětlí, jaké to je.

4. Časté dotazy

   Nejpodceňovanější sekce na celém webu. Unese to moje auto? Jak dlouho trvá rozložení? Co když prší? Co v zimě? Každá nezodpovězená otázka je důvod, proč někdo nenapíše — a nedozvíte se o tom.

5. Kontakt

   Na konci, protože teprve tady už člověk ví, na co se ptá. A dostupný shora navigací, aby ho nemusel hledat, kdo se rozhodl dřív.

Barvy a písmo

Paleta je žlutá #FCCE14 na velmi tmavé #0C1C1B s bílou. Je to volba, která funguje právě proto, že je ta tmavá tak tmavá:

Tohle je lekce, která platí pro každou značku se sytou teplou barvou: žlutá, oranžová a červená jsou grafické barvy, ne textové. Na tmavém podkladu nesou text bez problémů, na světlém zmizí. Když má firma žluté logo, neznamená to, že může mít žluté nadpisy.

Písmo je kombinace bezpatkového Cabinu a patkové Lory. Patky u delších odstavců dodávají ten klidnější, méně reklamní tón, který se k rodinné firmě hodí víc než další bezpatkové písmo.

U produktu, který lidi neznají, je nejdražší chyba napsat na první obrazovku slogan. Chvíli jsem s klientem řešil, jestli tam má být něco chytrého — nakonec tam je prostě napsané, co to je. To je skoro vždycky správně.

Marian Bendák

Co bych dnes udělal jinak

Web vznikl v roce 2024 v Bootstrap Studiu, nad HTML, CSS a JavaScriptem. Fungoval a splnil, co měl. Dneska bych dvě věci řešil jinak:

• Nestavěl bych na hotové mřížce. Bootstrap s sebou nese kus stylů, které stránka nepoužije, a u jednostránkového webu je to zbytečná váha. Dnes píšu styly rovnou — proč se to počítá, mám rozepsané.
• Dal bych dotazům strukturovaná data. Sekce s častými dotazy se dá označit tak, aby se odpovědi mohly objevit přímo ve vyhledávání. U produktu, který lidi neznají, je to přesně ten obsah, na který se ptají.

Obojí je dnes součástí toho, jak weby stavím. Co to dělá s cenou, rozebírám zvlášť.

Co s tím dál

Jestli prodáváte něco, co se musí vysvětlit, platí z tohohle projektu hlavně dvě věci: na první obrazovku napište, co to je, a sepište otázky, které vám chodí e-mailem.

Další projekty jsou v portfoliu. Pokud řešíte podobný web, napište mi — konzultace i návrh jsou zdarma.