Lindevo

Forgewright Performance

Koncepta dizains spēka treniņu zālei ar treneru vadību — neona-uz-melna brutālisms, klašu grafiks, kas nemelo, un dalības režģis, kas nopelna savu cenu.

Tech Stack
TypeScript
React
Tailwind CSS
TanStack
Vite
Vercel
Forgewright Performance

Forgewright Performance — Train Stronger. Move Better.

Koncepta dizains, kas pēta, kā trenera vadītai spēka zālei pārdot dalību tiešsaistē

Šis ir portfolio koncepts, nevis īsta klienta projekts. Forgewright izstrādājām, lai izaicinātu nogurušu pieņēmumu nišā: ka fitnesa vietnēm jāizskatās "premium" vai "maigām". Nopietnās svaru zāles, ko apskatījām kā etalonu, tādas neizskatās — tās izskatās pēc darbnīcas. Mēs aizvedām šo ideju vēl tālāk — uz brutālistisku neona-uz-melna sistēmu ar asām robežām, lime ēnām un nulles stoka fotogrāfiju glancējumu.

Ko šis dizains atrisina

Šajā segmentā klienta pirmais jautājums ir "vai šī zāle ir man, vai influenceriem?" — un otrais ir "vai man jāparakstās, pirms es redzu klašu grafiku?" Lielākā daļa zāļu vietņu uz abiem atbild nepareizi. Forgewright mokaps uz pirmā atbild, stipri ieņemot trenera estētiku — drosmīgi displeja burti, reālas treneru fotogrāfijas, nekādu kuratētu spoguļa selfiju. Uz otrā tas atbild, ievietojot nākamās klases kartiņu tieši varonī ar dzīvu taimeri, lai apmeklētājs redz — nenotikt skrollēt — ka tas ir reāls grafiks, nevis mārketinga rekvizīts.

Programmu režģis izmanto kategoriju krāsu blokus (Spēks, Conditioning, Yoga, Personal) ar lime akcentu ēnām. Katra programmas kartiņa iekļauj trenera vārdu, laika slotus un intensitātes līmeni — trīs faktus, ko nopietns sportists patiesībā grib zināt. Dalības līmeņu tabula veidota ap vienkāršu solījumu: bez gada līgumiem, bez reģistrācijas maksas, atcelšana no Tava panela. Šis teksts dzīvo blakus cenai, nevis aprakts smalkajā drukā.

Treneru bloks izmanto reālus portretus un īsus, atklātus aprakstus — "Marek startēja masters līmenī. Viņš ir lēnāks nekā agrāk, un viņš tev to pateiks pats." — nevis glancētus tituliņus. Atklātība ir zīmols.

Note

Tiešsaistes priekšskatījums: mockups.lindevo.com/m/gym

Dizaina sistēmas akcenti

  • Brutālistiska robežu + ēnu sistēma: 3px melnas robežas ar 4px lime nobīdes ēnām uz katras interaktīvas virsmas
  • Displeja kursīva versāli zīmola zīmei; saspiests sans-serif teksta daļai — vizuāli nepārprotami atšķiras no jebkuras "butikveida studijas"
  • Dzīvs nākamās klases taimeris, ankurēts pie varoņa, kas atskaita līdz nākamajai sesijai
  • Krāsu kodētas programmu kategorijas, lai atgriezies apmeklētājs varētu skaņot uz "Spēks" un vairs nelasīt
  • Pelēktoņos un ar palielinātu kontrastu apstrādāta varoņa fotogrāfija, lai uzmanība paliek uz tipogrāfiju un formu

Tehnoloģiju steks

  • TanStack Start ar React 19 — SSR
  • Tailwind v4 @theme tokeni ar pielāgotām ēnu utilītām brutālistiskajai sistēmai
  • Framer Motion hover stāvokļu horeogrāfijai uz līmeņu kartītēm
  • Izvietots uz Vercel

Vēlaties šādu vietni savai zālei?

Visa sistēma — navigācija ar klases taimeri, varonis, programmu režģis, grafika tabula, treneru bloks, dalības līmeņi, kontakti — ir uzbūvēta un pārzīmējama. Mēs varam pielāgot tipogrāfiju, samainīt neonu pret kaut ko citu, ja Jūsu zīmols to prasa, savienot Jūsu zāles vadības programmatūru un palaist produkcijas vietni aptuveni divās nedēļās. Sākt sarunu →