Web pro centrum rozvoje řeči dětí, ze kterého rodič hned pozná, co dítě čeká, kolik to stojí a jak se objednat.
Henrieta je vystudovaná logopedka a otevírala vlastní centrum v Topoľčanech pro děti od tří do osmi let. Měla logo, barvy a hodně programů. Neměla web, hotový ceník ani vlastní fotky.
Základem byl dotazník o šesti okruzích: praxe, služby, rezervace, vzhled, obsah a praktické informace. Z jejích odpovědí jsem pak skládal celý web, sekci po sekci.
„Pomáham detským klientom rozvíjať jazýček, pripraviť sa na vstup do školy a zvládnuť správnu výslovnosť hravou a rešpektujúcou formou.“
Čtyři otázky z dotazníku a co se z nich na webu stalo. Vyber otázku a uvidíš výsledek.
Odpověď v dotazníku
„Individuálna stimulácia reči, skupinové kurzy Maxík, Sindelar a Elkonin, myofunkčný tréning. Každý nový klient musí najprv absolvovať úvodnú konzultáciu.“
Co jsem z toho udělal
Sedm služeb je na první pohled hodně. Nabídku jsem seřadil podle toho, jak rodič opravdu postupuje: nahoře povinný první krok s cenou a tlačítkem na rezervaci, pod ním teprve individuální lekce a skupinové kurzy.
Služby
„Individuálna stimulácia reči, skupinové kurzy Maxík, Sindelar a Elkonin, myofunkčný tréning. Každý nový klient musí najprv absolvovať úvodnú konzultáciu.“
Sedm služeb je na první pohled hodně. Nabídku jsem seřadil podle toho, jak rodič opravdu postupuje: nahoře povinný první krok s cenou a tlačítkem na rezervaci, pod ním teprve individuální lekce a skupinové kurzy.
Ceník
„Cenník nie je finálne uzavretý. Cieľom je smerovať deti do skupinových kurzov a balíčkov sedení, aby sa zabezpečila pravidelnosť.“
Ve finálním ceníku ukazuje každá karta cenu jednoho sezení a hned vedle výhodnější balíček pěti sezení. Skupinové kurzy mají cenu za dítě, takže rodič nemusí nic přepočítávat.
Časté otázky
„Sekcia FAQ sa na webe vynechá. Namiesto toho sa uvedú praktické pokyny: príchod iba so zdravým dieťaťom, čo si priniesť a storno podmienky.“
Místo seznamu otázek, které nikdo nečte, má web čtyři krátké pokyny před první návštěvou. Rodič se je dozví dřív, než si termín zarezervuje, ne až ve dveřích.
Vzhled
„Hravý a farebný, prispôsobený názvu Hravé slovíčka. Logo aj firemné farby sú k dispozícii.“
Hravost nese písmo a jedna zvlněná linka pod hlavičkou, ne animace. Mátová z loga drží klidné plochy, terakotová patří jen rezervaci, aby bylo na každé obrazovce jasné, kam kliknout.
Web nečtou děti, ale jejich rodiče. Ti potřebují vědět dvě věci: že tu bude dítě v dobrých rukou a co mají udělat dál. Proto je hravost jen v detailech a všechno ostatní je klidné a čitelné.
Nadpisy jsou v zaobleném písmu Grandstander, text ve Figtree. Barvy vycházejí z loga a každá má jednu práci. Terakotovou rodič uvidí jen tam, kde se dá objednat.
Mátová
Hlavička a plochy, z loga
#8FCCC3
Tmavá mátová
Zvýraznění a odkazy
#5EA89E
Terakotová
Jen rezervace
#E07A5F
Medová
Štítky a drobnosti
#F4C56C
Krémová
Pozadí stránky
#FAF8F5
Sedm služeb je pro rodiče hodně a nejtěžší je vybrat tu správnou. Když se rodič zastaví v ceníku déle než tři sekundy, vyjede v rohu malé okno s fotkou Henriety a vzkazem, že se rozhodovat nemusí: všechno spolu probrají na úvodní konzultaci. Pod vzkazem je rovnou tlačítko na rezervaci.
Po zavření se okno během návštěvy už neukáže, aby neotravovalo.
Jinak dělám hlavně v Next.js. Tady je ale jedna stránka, kterou rodič projde shora dolů, bez přihlášení a bez databáze. Astro ji vygeneruje do čistého HTML a JavaScript dostane jen pár míst, kde je opravdu potřeba: menu na mobilu, zmenšení hlavičky při scrollu, okno s radou a mapa.
export interface Service {
id: string;
title: string;
shortDescription: string;
targetAge: string;
duration: string;
price: string;
packagePrice?: string;
category: 'consultation' | 'individual' | 'group';
}
// Layout.astro: stejné služby pro Google
hasOfferCatalog: {
itemListElement: services.map((s) => ({
"@type": "Offer",
name: s.title,
priceCurrency: "EUR",
})),
}Všechny texty, služby a ceny jsou v jednom typovaném souboru. Z něj se skládá ceník na stránce i strukturovaná data pro Google.
Když se změní cena, upraví se na jednom místě a ceník na webu i data pro vyhledávače se změní spolu.
Fotky jdou přes astro:assets. Při buildu se převedou do WebP a vygenerují se jen ve velikostech, které stránka opravdu zobrazí.
Leaflet se stáhne teprve ve chvíli, kdy se návštěvník blíží ke kontaktům. Kolečko myši mapu přiblíží až po kliknutí do ní a na mobilu jde přes mapu normálně scrollovat.
Strukturovaná data popisují centrum jako místní podnik s adresou, otevírací dobou a katalogem služeb s cenami. K tomu sitemap a náhled pro sdílení.
Klientka chtěla mít online rezervaci u všech služeb, takže každé tlačítko na rezervaci vede rovnou do Reservia. Storno pravidla rodič vidí ještě před objednáním.
Kód je hotový. Web teď čeká na věci, které se nedají naprogramovat: doménu hraveslovicka.sk, vlastní fotky od fotografky a finální telefon a e-mail. Až budou, stačí je doplnit do jednoho souboru s obsahem a web jde ven.
Pošli mi pár vět o tom, co děláš. Dotazník pak připravím na míru.