Lindevo

Solène Editorial Photography

Koncepta dizains editoriāla stila kāzu un portretu fotogrāfei — pārklājošos attēlu režģis, serifu kursīva balss un portfolio, kas ielādējas tikpat ātri, cik tas izjūtas.

Tech Stack
TypeScript
React
Tailwind CSS
TanStack
Vite
Vercel
Solène Editorial Photography

Solène Editorial Photography — fotogrāfija, kas izjūtas kā atmiņa

Koncepta dizains, kas pēta, kā kāzu un portretu fotogrāfei prezentēt darbu kopumu tiešsaistē

Šis ir portfolio koncepts, nevis īsta klienta projekts. Solène izstrādājām, lai izaicinātu dominējošo modeli nišā: pilna ekrāna slaidu varonis ar autoatskaņotu attēliem un hamburgeru izvēlni, kas slēpj visu pārējo. Tādas vietnes ir lēnas, naidīgas mobilajām ierīcēm un izdzēš fotogrāfes balsi. Mēs izvēlējāmies pretējo virzienu — editorial izkārtojumu, serifu kursīva tipogrāfiju, sakrautu attēlu režģi un cenas, kas redzamas bez "pieprasīt cenu" formas.

Ko šis dizains atrisina

Kāzu fotogrāfa vietnei ir viens uzdevums: pirmajās trīs sekundēs pārliecināt pāri, ka šī persona redz skaisti. Vairums nišas vietņu to apsedz ar izvēlnēm un modāliem. Solène mokaps sākas ar trim pārklājošos varoņa attēliem ar dažādiem mērogiem — galveno editoriālo kadru, ciešu detaļu un vides trešo — lai apmeklētājs redz darbu diapazonu, neskrollējot. Zīmols ir izlikts serifu kursīvā atturīgā mērogā; tas nekonkurē ar fotogrāfiju.

Pakalpojumu sadaļa sadala piedāvājumu (Kāzu stāsti, Portretu sesijas, Zīmolu kampaņas) ar īsiem, atklātiem aprakstiem un sākuma cenām. Katram pakalpojumam ir skaidri nosaukts rezultāts ("iespiests lay-flat albums, ar rokām iesiets, nosūtīts 90 dienu laikā"), nevis miglaini paketu nosaukumi. Pieredzes bloks iet cauri četru soļu darba procesam (Iepazīšanās zvans → Moodboard → Fotosesijas diena → Privāta galerija) — pietiekami īss, lai izlasītu vienā elpas vilcienā, pietiekami detalizēts, lai pāris zinātu, ko gaidīt.

Portfolio bloks izmanto kuratētu deviņu attēlu režģi ar smalkām robežām, optimizētu kā AVIF ātrai ielādei — svarīgi, jo lielākā daļa fotogrāfijas vietņu zaudē apmeklētājus otrā attēla pirmsielādes laikā.

Note

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

Dizaina sistēmas akcenti

  • Pārklājošos varoņa attēlu režģis ar dažādiem mērogiem — editorial plašums bez slaidera
  • Serifu kursīva zīmola zīme atturīgā mērogā; minimāls sans-serif teksta daļai, lai tipogrāfija nekonkurē ar attēliem
  • Tertiāra toņa pasvītrojuma robežas uz navigācijas saitēm — klusi atšķiras no standarta pasvītrojuma
  • Iebūvēta attēlu optimizācija caur @unpic/react ar AVIF un srcset, lai portfolio ielādes paliek zem sekundes
  • Apmaļotas attēlu kaudzes sadaļu blokos — atsauce uz drukas un albuma izkārtojumu, nevis web-app kartītēm

Tehnoloģiju steks

  • TanStack Start ar React 19 — SSR un katra attēla straumēšana
  • @unpic/react — atsaucīga AVIF/WebP attēlu piegāde
  • Tailwind v4 @theme tokeni atturīgai krāsu ierobežošanai
  • Framer Motion varoņa stagger animācijai
  • Izvietots uz Vercel ar malu attēlu optimizāciju

Vēlaties šādu vietni savai fotostudijai?

Visa kompozīcija — navigācija, pārklājošos varonis, pakalpojumi, pieredzes laika līnija, portfolio režģis, atsauksmes, pieprasījuma forma — ir pārzīmējama. Mēs ievietojam Jūsu attēlus, iestatām Jūsu sākuma cenas, savienojam Jūsu rezervāciju vai pieprasījuma plūsmu un palaižam produkcijas vietni aptuveni divās nedēļās. Sākt sarunu →