Concept Project·Otel ve turizm
Butik konaklama
Sakin bir sahil kasabası butik oteli için doğrudan rezervasyon odaklı web deneyimi. Oda tipleri, müsaitlik ve iletişim akışları gerçek bir müşteri adına tasarlanmış tasarlanmış arayüzdür.
Teknoloji
- Next.js
- TypeScript
- Tailwind CSS
- Headless CMS
- Form API

Dates
12 — 15 Oct
Hospitality
Harbor Stay
01
Problem
Butik oteller genelde dağınık kanallarda (OTA, telefon, sosyal medya) rezervasyon alıyor; marka deneyimi parçalanıyor ve doğrudan rezervasyon oranı düşük kalıyor.
- ▸Doğrudan rezervasyon talebini artırmak
- ▸Oda ve deneyim hikâyesini net anlatmak
- ▸Mobilde hızlı karar ve iletişim sağlamak
02
Araştırma
OTA listelerinde tekrarlayan görsel dili, butik otellerin fiyat şeffaflığı beklentisini ve mobilde hızlı iletişim (WhatsApp / form) tercihini inceledik. Proje kapsamında gerçek kullanıcı verisi kullanılmadı.
03
Wireframe & akışlar
Ana sayfa → oda keşfi → müsaitlik / talep formu → teşekkür. Alternatif: deneyimler sayfası → paket talebi → iletişim. Her adımda net CTA ve geri dönüş yolu tanımlandı.
04
UI & tasarım sistemi
Sakin teal ve kum tonları, geniş boşluklar, yumuşak köşeler ve fotoğraf odaklı grid. Tipografi: Plus Jakarta Sans display, Geist body. Hareket minimal — yalnızca kart hover ve sayfa geçişlerinde.
- · Hero: manzara ve doğrudan rezervasyon CTA
- · Oda listesi: filtre, fiyat aralığı ve kapasite
- · Oda detay: galeri, olanaklar, müsaitlik formu
- · Deneyimler: yerel aktivite kartları
- · İletişim: harita, form ve hızlı mesaj kanalları
05
Geliştirme
Statik + ISR sayfalar, CMS’ten oda ve deneyim içerikleri, form gönderimleri sunucu tarafı doğrulama ile. Görsel optimizasyon ve locale desteği (TR/EN) planlandı.
06
Sonuçlar
Doğrudan rezervasyon kanalı, mobil deneyim ve içerik yapısı marka hikâyesini destekleyecek şekilde kurgulandı.
Doğrudan rezervasyon kanalı, mobil deneyim ve içerik yapısı marka hikâyesini destekleyecek şekilde kurgulandı.
Teknoloji
- Next.js
- TypeScript
- Tailwind CSS
- Headless CMS
- Form API
Responsive kırılımlar, form doğrulama, erişilebilirlik kontrolleri (kontrast, klavye) ve Core Web Vitals hedefleri proje kapsamında tanımlandı.
Sonraki proje
Finans paneli →Sonraki adım
Bir fikriniz mi var? Birlikte ürüne dönüştürelim.
Projenizi birkaç adımda anlatın, kapsamı birlikte netleştirelim.