1. Giriş
“Adım adım nasıl yaparım?”, “Hangi sırayla ilerlemeliyim?”, “Wireframe mi önce, UI kit mi önce?” gibi sorular otel projelerinde çok sık gelir; çünkü otel web siteleri SaaS ya da e-ticaret gibi düz bir checkout’tan farklıdır. Oda tipleri, sezonluk fiyatlama, konsept (AI/HB/BB), iptal kuralları, çok dilli akış (TR–EN–DE–RU) ve rezervasyon motoru entegrasyonu aynı anda yönetilir. Bu rehberde Figma’da wireframe → UI kit/design system → prototip test → Next.js handoff zincirini otel özel ihtiyaçlarıyla birlikte kuracağız.
3 dakikalık özet (ekranda kalmanız için):
- Önce persona + senaryo: misafir ne arıyor, hangi ekranda karar veriyor?
- Sonra rezervasyon wireframe: akışı (tarih → oda → form → ödeme) “en kısa karar yolu” ile çizin.
- En son design system + prototip + handoff: bileşen/variant ve token mantığıyla geliştirmeyi hızlandırın.
2. Otel projesi için Figma hazırlığı
Otel projesinde Figma dosyanız “tasarım yapılan yer” değil; ekiplerin ortak çalışma alanıdır. Hazırlık doğru yapılırsa, UI/UX Design süreci hızlanır; yanlış yapılırsa revizyonlar büyür ve handoff karmaşası artar. Buradaki hedef; daha ilk günden “Hotel Website” tasarımını ölçeklenebilir kurmaktır.
Persona ve senaryo oluşturma (otel bağlamına göre)
Otel projelerinde en az 3 senaryo genellikle şarttır:
- •Resort (Belek): aile odası + konsept + çocuk yaşı + iptal esnekliği
- •City: hızlı rezervasyon + konum + tek gece
- •Butik (Antalya merkez / Bodrum örneği): görsel/güven + deneyim + yorumlar
Mini örnek (Belek resort): Kullanıcı “2 yetişkin + 2 çocuk” seçtiğinde oda kartları çocuk politikası ve toplam fiyat netliği vermiyorsa, karar OTA’ya kayar. Bu yüzden wireframe’de “kişi/çocuk seçimi” ve “toplam fiyat (vergiler dahil)” alanları erken görünmelidir.
☑ Mini Check (Hazırlık):
- •3 ana persona ve 1 “yüksek niyetli” rezervasyon senaryosu yazıldı mı?
- •Rezervasyon funnel’da kritik karar ekranları belirlendi mi?
- •Çok dilli ihtiyaç (TR–EN–DE–RU) ve içerik uzunluk farkı not edildi mi?
Layout grid ve breakpoint planlama
Figma’da grid yalnız hizalama değil; geliştirme için “kurala dönüşen” altyapıdır. Mobil ve desktop kırılımını baştan tanımlayın:
- •Mobil: 4/8 kolon, dar padding
- •Tablet: 8/12 kolon
- •Desktop: 12 kolon + sabit container
Teknik SEO notunu unutmayın: Görsel ağırlıklı otel sitelerinde performans ve UX birlikte yürür. Tasarımda “çok büyük hero” ve “aşırı animasyon” planı, geliştirmede LCP/INP riskini büyütür. Bu yüzden tasarım aşamasında bile “Core Web Vitals dostu” kararlar almanız, sonraki sprintleri rahatlatır. (Detay için: https://dgtlface.com/tr/seo/teknik-seo)
Ne yapmalıyım? (SXO aksiyon listesi)
- • 3 persona + 3 senaryo ile dosyayı başlatın; “ekran listesi”ni senaryoya göre çıkarın.
- • Breakpoint’leri ve grid’i ilk gün sabitleyin; sonra oynamayın.
- • Çok dilli metin alanlarını component olarak planlayın (text overflow sürprizi yaşatmasın).
3. Figma ile otel rezervasyon akışını nasıl çizersiniz?
Kısa cevap: önce ekranları “görev” olarak tanımlayın, sonra akışı en az adımla bağlayın ve her ekranda tek karar verdirin. Önerilen hızlı yöntem: (1) tarih/kişi seçimi, (2) oda listesi–karşılaştırma, (3) oda detayı–koşul netliği, (4) kısa form, (5) ödeme. Her adımda “toplam fiyat + iptal özeti + ana CTA” sabit kalır; böylece prototip testinde sürtünme hızlı yakalanır.
Wireframe ile rezervasyon akışını çizmek (adım adım)
Aşağıdaki sıra, otel rezervasyon wireframe’i için pratik bir “design workflow for hotel websites” iskeletidir:
- Entry (Geliş ekranı): kampanya/oda sayfası veya ana sayfa
- Uygunluk: tarih + kişi
- Oda listesi: kartlar + filtre + toplam fiyat
- Oda detayı: galeri + güven + iptal özeti + CTA
- Form: minimum alan + hata/yardım
- Ödeme: güven + özet + tamamla
Ekran görüntüsü notu (tasarımcı için):
- •“Oda listesi” ekranında asla tüm detayları göstermeyin; karar bilgisini gösterin.
- •“Oda detayı” ekranında ikna ve güveni güçlendirin.
Otel özel kritik bloklar (rakiplerin atladığı yer)
Piyasadaki Figma rehberleri çoğunlukla SaaS/e-ticaret örneği verir. Otelde ise şu 3 blok wireframe’de özel ele alınmalı:
- •Oda tipleri ve varyantları: Standart / Deluxe / Family / Swim-up gibi (Belek örneği)
- •Sezonluk fiyatlama: tarih aralığına göre fiyat/koşul değişimi
- •Çok dilli yapı: metin uzunluğu + para birimi + iptal dili
Mini örnek (Antalya): “Deniz manzaralı oda” kartında “iptal özeti” yoksa, kullanıcı ödeme adımında panikler. Wireframe’de iptal/koşul satırı “sonradan eklenecek metin” değil; karar öğesidir.
☑ Mini Check (Wireframe):
- •Her ekranda tek ana karar var mı?
- •Toplam fiyat + iptal özeti + ana CTA standardı var mı?
- •Oda listesi ve oda detayı rolleri ayrıştırıldı mı?
- •Çok dilli metin alanları ve taşma riskleri not edildi mi?
Ne yapmalıyım? (SXO aksiyon listesi)
- • Wireframe’i “sayfa sayfa” değil “akış akış” çizin.
- • Her adımda “karar bilgisini” (fiyat/iptal/CTA) sabitleyin.
- • Otel özel blokları ayrı component olarak tasarlayın: oda kartı, iptal rozeti, fiyat özeti.
4. UI Kit ve tasarım sistemini kurmak (component + variant)
Wireframe’i hızlandıran şey çizim yeteneği değil; UI kit + design system disiplinidir. UI kit, tekil ekranları; design system ise tekrar eden parçaları yönetir. Özellikle Next.js’e geçişte, bileşen mantığı kurulu değilse geliştirme süresinin uzaması ve revizyon maliyetinin artması çok sık görülür (rakam vermeden yönlü ifade).
UI Kit çekirdeği (otel projesine özel)
Minimum bir otel UI kit’inde şunlar mutlaka olmalı:
- •Typo scale (H1–H5 + body)
- •Button set (primary/secondary/ghost)
- •Form fields (input/select/date picker states)
- •Card set (oda kartı, teklif kartı)
- •Badge set (iptal, kampanya, konsept)
- •Price block (toplam fiyat/kişi/oda mantığı)
Component yapısı ve variant kullanımı
Figma’da “component + variant” kullanımı, geliştirmede “tek component, çok durum” mantığına dönüşür. Örnek:
- •RoomCard variant: standard / family / suite
- •State: default / selected / sold-out
- •Badge: refundable / non-refundable
☑ Mini Check (Design System):
- •Oda kartı component’i ve varyantları tanımlı mı?
- •Form state’leri (error/disabled/loading) var mı?
- •Çok dilli metin için component’lerde min/max alanlar düşünülmüş mü?
- •Price block her ekranda aynı dil ile mi konuşuyor?
Ne yapmalıyım? (SXO aksiyon listesi)
- • UI kit’i “güzel görünen” değil “tekrar eden” parçalardan başlatın.
- • Oda kartı ve price block’u önce standardize edin; otelde en kritik bileşenler bunlardır.
- • Variant’ları gerçek senaryoya göre kurun (Belek family oda / Antalya city hızlı rezervasyon).
5. Prototip ile kullanıcı akışlarını test etmek (friction avı)
Figma prototipi, “sunum” değil; sürtünme avı aracıdır. Özellikle rezervasyon funnel’da prototip testleri, geliştirme başlamadan hataları yakalamayı sağlar. Prototip; Wireframe → UI kit sonrası kurulmalı ki test “tasarım dili” ile birlikte değerlendirilsin.
Kliklenebilir prototip flow’u nasıl kurulur?
- •Akış adımlarını numaralandırın (Entry → Uygunluk → Oda listesi → Form → Ödeme)
- •Her adımın tek hedefi olsun (CTA)
- •Ölçmek istediğiniz kritik noktaları işaretleyin: “nerede kararsız kalır?”
Ekran açıklaması örneği: “Sticky rezervasyon CTA” oda detayı ekranında görünmezse kullanıcı fotoğraf galerisinde kaybolur; prototipte bu görünürlüğü test edersiniz.
Mikro animasyon ve etkileşimler (dozu doğru ayarla)
Mikro animasyonlar kullanıcıya durum bildirir (loading, seçim, geçiş). Ancak otel sitelerinde ağır animasyonlar performans riskini artırabilir. Kural: animasyon “gösteriş” değil “anlam” için olmalı.
Sık yapılan 5 hata (otel projelerinde)
- Oda listesi ekranını detay gibi şişirmek (karar uzar)
- Fiyat dilini karıştırmak (oda/kişi, vergi dahil mi?)
- İptal koşulunu ödeme ekranına bırakmak (son dakika terk)
- Çok dilli metin taşmalarını prototipte test etmemek
- Handoff öncesi component isimlendirmesini standardize etmemek
☑ Mini Check (Prototip):
- •Her ekranın tek ana CTA’sı var mı?
- •Fiyat/iptal metinleri “karar anında” görünür mü?
- •Mobilde tek elle CTA erişimi test edildi mi?
- •Dil varyantları (TR–EN–DE–RU) prototipte denendi mi?
Ne yapmalıyım? (SXO aksiyon listesi)
- • Prototip testini “görsel beğeni” değil “akış hızı” için yapın.
- • 5 kritik hatayı checklist’e bağlayın ve her revizyonda tekrar kontrol edin.
- • Test bulgularını doğrudan component/variant güncellemesine çevirin.
6. Figma’dan Next.js geliştirmeye geçiş (handoff süreci)
Handoff süreci düzgün kurulduğunda, tasarım–geliştirme arasında “aynı şeyi iki kez anlatma” ihtiyacı azalır; revizyon maliyeti düşer ve sprint daha öngörülebilir hale gelir (yönlü fayda). Burada amaç; Figma’yı “geliştiricinin anlayacağı dile” çevirmektir.
Handoff paketi (minimum teslim seti)
- •Component listesi + isimlendirme standardı
- •Variant/state açıklamaları
- •Spacing/typography token’ları
- •Responsive davranış notları
- •Erişilebilirlik (focus, contrast) notları
- •Görsel export kuralları (lazy-load ve alt text planı)
İç link (geliştirme tarafı): Next.js uygulamasına geçiş ve web geliştirme süreci için: https://dgtlface.com/tr/yazilim/web-sitesi-gelistirme
Developer-ready detaylar (küçük ama kritik)
- •Button, input, card bileşenleri “aynı isimle” yürüsün
- •Ölçüler px değil “token mantığı” ile verilsin (spacing-8 gibi)
- •Görsel export’lar (özellikle Figma ekran görüntüleri) web’de lazy-load kurgusuna uygun planlansın
- •Alt text’ler uzun kuyruklu, doğal olsun: ör. “otel ui tasarım figma örneği”, “otel rezervasyon wireframe örnek”
| Figma çıktısı | Ne işe yarar? | Next.js karşılığı (pratik) |
|---|---|---|
| Component + Variant | Tek bileşen, çok durum | UI component + props/state |
| Design tokens (type/space) | Tutarlılık ve hız | Tailwind/tema değişkenleri |
| Prototip flow | Akış doğrulama | Route + step UI düzeni |
| Specs (responsive) | Mobil/desktop davranışı | Breakpoint kuralları |
| Asset export + alt text | Performans + SEO | Optimized images + lazy-load |
☑ Mini Check (Handoff):
- •Component isimleri dev ile aynı sözlükte mi?
- •Variant/state’ler yazılı mı (default/selected/loading)?
- •Responsive davranış notları var mı?
- •Görsel export + lazy-load + alt text planı hazır mı?
Ne yapmalıyım? (SXO aksiyon listesi)
- • Handoff’u “dosya atmak” değil “teslim paketi” olarak görün.
- • Component/variant sözlüğünü tek sayfaya indirip geliştirme ekibiyle onaylayın.
- • Teknik SEO gereği görsel ağırlığını kontrol edin; CWV risklerini erken işaretleyin.
7. Otel örnek ekran seti (Antalya / Belek bağlamıyla)
Otel projelerinde ekran örnekleri “gerçekçi” olduğunda ekip daha hızlı hizalanır. Aşağıdaki örnek ekran setini Figma’da sayfa sayfa değil, akış akış tasarlayın:
- •Ana sayfa (Antalya): konsept + destinasyon + hızlı tarih seçimi
- •Oda listesi (Belek): family odalar + konsept + iptal rozetleri
- •Oda detayı: galeri + toplam fiyat + iptal özeti + sticky CTA
- •Rezervasyon formu: minimum alan + güven mesajı
- •Ödeme: özet + güven + tamamla
8. Figma Otel Wireframe Şablonunu İndir (Template Asset)
Figma Otel Wireframe Şablonunu İndir — UI/UX Tasarımı (v1.0)
Bu şablon, otel web sitesi için rezervasyon akışını (tarih → oda → form → ödeme) hızlıca taslaklamanız ve kritik karar bloklarını (toplam fiyat, iptal özeti, ana CTA) standartlaştırmanız için hazırlandı. Tasarım ve geliştirme ekiplerinin aynı ekran dilinde buluşmasını sağlar; revizyonları “baştan” değil “bileşen bazında” yönetmenize yardım eder.
Kim Kullanır?
Otel pazarlama ekibi + ajans tasarımcısı + Next.js geliştirme ekibi (handoff ortak dili).
Nasıl Kullanılır?
- Şablonu kopyalayın ve proje adınızı yazın (Antalya/Belek senaryosu seçin).
- Akış ekranlarını sırayla doldurun (Entry → Uygunluk → Oda listesi → Oda detayı → Form → Ödeme).
- Her ekran için “karar bilgisi” alanlarını tamamlayın ve prototip bağlantılarını kurun.
Ölçüm & Önceliklendirme (Kısa sürüm)
PDF içinde: Problem→Kök Neden→Çözüm tablosu + 14 gün sprint planı + önce/sonra KPI tablosu
Bir Sonraki Adım
Otel web sitenizde wireframe, UI kit ve prototip akışını aynı sprintte netleştirmek isteyen ekipler için hızlandırılmış plan çıkarın.
Sık Sorulan Sorular
Figma ile otel web sitesi nasıl tasarlanır?▾
Wireframe ile rezervasyon akışı nasıl çizilir?▾
UI kit otel projelerinde neden önemlidir?▾
Figma prototipleri geliştirici ekibe nasıl aktarılır?▾
Otel rezervasyon flow’unda Figma’da en kritik ekran hangisi?▾
Çok dilli otel sitelerinde tasarım sürecinde nelere dikkat edilmeli?▾
Figma görselleri ve ekran görüntüleri sitede performansı etkiler mi?▾
İlgili İçerikler