Skip to content / İçeriğe geç
NISCRAFT

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 adım

Bir fikriniz mi var? Birlikte ürüne dönüştürelim.

Projenizi birkaç adımda anlatın, kapsamı birlikte netleştirelim.