Web / vizuální identita / 2025

Pro Institut o stáří nahlas vznikl kompletní web projektu: vizuální systém (barvy, typografie, UI — logo zůstalo klientské), custom WordPress šablona a struktura kolem osmidílné série rozhovorů, PDF mapy péče a katalogu ověřených služeb podle místa. Live na ostarinahlas.cz.

dílů série

custom šablona

ostarinahlas.cz

O klientovi

Institut o stáří nahlas, z.s.

Institut o stáří nahlas, z.s. mluví o stáří otevřeně a pomáhá rodinám rychle se zorientovat v systému péče o seniory v ČR. Projekt spojuje rozhovory s odborníky, praktickou „mapu péče“ a síť zdravotních i sociálních partnerů — potřebovali web, který působí důvěryhodně, srozumitelně a lidsky, ne jako generická šablona pro neziskovky.

Cíl

Cílem byl plnohodnotný web, kterému je snadné rozumět: jasná mise na homepage, osm dílů jako páteř obsahu, stažení PDF mapy péče a později katalog služeb s hledáním podle adresy a mapou. Paralelně vizuální jazyk (primární / sekundární / accent / basic + Source Sans 3), který unese rozhovory, partnery i stránky poskytovatelů — bez redesignu loga.

O stáří nahlas — atmosférický vizuál projektu

Logo

Značka na brandových plochách

Stávající logotyp Institutu o stáří nahlas na světlém surface, brand blue i ink — logo jsme nepřekreslovali, zasadili jsme ho do nového vizuálního systému.

Barevnost

Firemní barvy

Digitál i tisk sdílí stejné hodnoty včetně HEX, RGB a CMYK — konzistentní paleta napříč všemi výstupy značky.

care_blue

Care Blue

HEX: #155DFB
RGB: 21 / 93 / 251
CMYK: 92 / 63 / 0 / 2

sky_cyan

Sky Cyan

HEX: #02A3FE
RGB: 2 / 163 / 254
CMYK: 99 / 36 / 0 / 0

voice_violet

Voice Violet

HEX: #7F22FE
RGB: 127 / 34 / 254
CMYK: 50 / 87 / 0 / 0

ink_basic

Ink Basic

HEX: #161616
RGB: 22 / 22 / 22
CMYK: 0 / 0 / 0 / 91

Obsah

Osm dílů jako mapa péče

Od úvodu do systému péče přes terénní služby, pobytová zařízení, právo, paliativu až po duševní zdraví pečujících — každá epizoda má vlastní stránku, YouTube přehrávač a místo na homepage.

Produkt

Služby s lokalitou, ne jen seznam odkazů

Pilíře Zdraví, Mobilita, Bezpečí, Terénní a Domovy doplňuje hledání podle adresy, okruh v kilometrech a mapa — tak, aby pečující našli pomoc v okolí, ne v chaosu záložek.

Brand

Identita kolem stávajícího loga

Logotyp zůstal klientský. Nový systém (barvy, Source Sans 3, komponenty, motion) dává webu i partner pages konzistentní hlas — od soft primary povrchů po accent CTA.

Proces

Jak projekt vznikal

Obsah a informační architektura

Struktura kolem toho, co pečující opravdu řeší: homepage s misí a výzvou k akci, díly série, o projektu, partneři, služby (pilíře + filtr podle místa), tým, blog Příběhy a kontakt — s jasnou cestou ke stažení mapy péče a přehrání prvního dílu.

Vizuální systém

Definice palety (#155DFB / #02A3FE / #7F22FE / #161616), typografie Source Sans 3 a UI komponent (CTAs, epizodní thumbnaily, partner badges, soft primary surfaces). Stávající logo jsme respektovali a zasadili do nového systému — ne redesignovali.

Custom WordPress vývoj

Šablona na míru (Tailwind CSS v4, GSAP motion, Leaflet mapa, Contact Form 7, Secure Custom Fields). Epizody, partneři, poskytovatelé a modulární brand pages (Selvo, ADP-SANCO…) jako obsahový model, ne nahodilé stránky.

Spuštění a provoz

Produkční ostarinahlas.cz na klasickém WP hostingu — deploy tématu přes GitHub Actions na FTP, cookie consent, newsletter a sociální kanály připravené na dlouhodobý obsah.

Web

Od homepage po mapu péče

Dodávka

Co jsem dodal

WordPress / Tailwind CSS / GSAP / Leaflet / Contact Form 7 / Secure Custom Fields / GitHub Actions / Brand design

Custom WordPress šablona (Tailwind + GSAP)

Vizuální systém bez redesignu loga

8dílná série rozhovorů + YouTube přehrávač

PDF mapa péče jako klíčové CTA

Katalog služeb s lokalitou a Leaflet mapou

Brand pages partnerů (Selvo, ADP-SANCO…)

CI deploy tématu (GitHub Actions → FTP)

Live na ostarinahlas.cz

Dopad

Co projekt přinesl

Jeden web pro celý projekt

Web drží misi, sérii, mapu péče i partnery na jednom místě — rodiny najdou orientaci, partneři prezentaci a tým prostor pro Příběhy.

Srozumitelný vizuální jazyk

Modrá / cyan / fialová paleta a čistá typografie oddělují projekt od generického „neziskového“ looku a unesou jak empatický obsah, tak praktický katalog služeb.