Kısa cevap: Figma ile web sitesi taslağı hazırlamak için önce sayfanın hangi bilgileri içereceğini belirleyin, ardından Frame kullanarak ekran boyutuna uygun bir çalışma alanı açın. Başlık, metin, görsel yeri, gezinme ve eylem düğmelerini önce sade şekillerle yerleştirin. Bu ilk taslak wireframe olarak adlandırılır; amacı renk ve görsel ayrıntılardan önce içerik sırasını test etmektir.
Wireframe, mockup ve prototip farkı
| Çalışma | Ana amaç | Beklenen ayrıntı |
|---|---|---|
| Wireframe | İçerik ve yerleşim | Sade kutular, başlıklar, akış |
| Mockup | Görsel tasarım | Renk, tipografi, görsel dil |
| Prototip | Etkileşim denemesi | Ekranlar arası geçiş, tıklama akışı |
Bir wireframe’de logo yerine “Logo” yazan bir dikdörtgen bulunması sorun değildir. Önemli olan ziyaretçinin aradığı bilgiye hangi sırayla ulaşacağıdır. Hazırlığa başlamadan önce web sitesi planlama rehberindeki hedef kitle ve sayfa haritası adımlarını tamamlayın.
Adım 1: İçerik listesini hazırlayın
Örnek olarak bir bilgi portalının rehber sayfasını tasarlayalım. Gereken parçalar şunlar olabilir: site logosu, ana gezinme, konu başlığı, kısa açıklama, içerik, ilgili rehberler ve alt bilgi. Form veya satın alma düğmesi gerçekten yoksa sırf taslağı doldurmak için eklemeyin. Her bloğun bir görevi ve ziyaretçiye katkısı olmalı.
Adım 2: Figma’da Frame oluşturun
- Yeni bir Figma tasarım dosyası açın.
- Frame aracını seçin; örnek bir mobil ekran genişliği ve ayrı bir masaüstü çerçevesi oluşturun.
- Her çerçeveye açık ad verin: “Rehber – Mobil” ve “Rehber – Masaüstü”.
- Önce içerik alanlarını basit dikdörtgen ve metin bloklarıyla oluşturun.
- Başlık, paragraf ve bağlantı sırasını ekran yukarıdan aşağı okunuyormuş gibi test edin.
Örnek cihaz boyutları yalnızca tasarımın başlangıç noktasıdır. Gerçek web sayfası iki sabit genişlikle sınırlı değildir; ara ekran boyutlarında da çalışmalıdır. Figma’da frame, gruplama ve yerleşim için farklı işlevler sunar; öğeleri rastgele gruplayıp duyarlı davranış beklemeyin.
Adım 3: Yerleşim kılavuzlarını kullanın
Figma’daki yerleşim kılavuzları (layout guides), sütunları ve boşlukları tutarlı kılmaya yardımcı olur. Masaüstünde ana içerik ve yan alan tasarlayabilirsiniz; mobilde bunları çoğu zaman tek sütunda sıralamak gerekir. Kılavuzun görsel çizgileri otomatik olarak çalışan CSS Grid kodu üretmez: geliştiricinin sayfayı ayrıca uygulaması gerekir.
Mini örnek: Masaüstünde sayfanın yaklaşık üçte ikisi makale, geri kalanı ilgili rehberler için ayrılabilir. Telefonda önce başlık ve makale, sonra ilgili rehberler gösterilebilir. Bu kesin bir oran değil, iki ekranın okunabilirliğini karşılaştırmak için örnektir.
Adım 4: Birincil eylemi ve gezinmeyi sınayın
Bir bilgi yazısında temel eylem ilgili konuyu okumak olabilir; ticari bir sayfada teklif formu veya iletişim önemli olabilir. Düğmeyi yalnız dikkat çeksin diye eklemeyin. Kullanıcı akışını şu sorularla test edin: Başlık ne anlatıyor? İlk önemli bilgi ne zaman görülüyor? Menü açıldığında içerik kapanıyor mu? Sayfanın sonunda hangi ilgili bağlantı gösteriliyor?
Adım 5: Görsel tasarıma geçmeden kontrol edin
- Mobilde içerik sırası mantıklı mı, ilk önemli bilgi kolay bulunuyor mu?
- Başlıklar gövde metninden anlamlı biçimde ayrılıyor mu?
- Gerçek metin uzunluğunda kutular taşıyor mu?
- Form varsa alan etiketleri ve hata mesajları için yer ayrıldı mı?
- Bağlantı ve düğmelerin dokunma alanı yeterli mi?
- Görsellerin açıklaması ve uygun alternatif metni için plan var mı?
- Tekrarlanan bileşenlerin aynı dilde tasarlanması sağlandı mı?
Renk aşamasına geçtiğinizde ücretsiz web tasarım araçları ve kontrast ölçme rehberinden yararlanabilirsiniz. Gerçek arayüzü test etmek için taslak tek başına yeterli değildir; geliştirilmiş sayfayı tarayıcıda ve cihazlarda ayrıca deneyin.
Sık sorulan sorular
Figma’dan doğrudan çalışan bir web sitesi çıkar mı?
Figma öncelikle tasarım ve prototip aracıdır. Tasarımın erişilebilir, hızlı ve işlevsel web sitesine dönüşmesi için uygun geliştirme ve test gerekir.
İlk taslakta gerçek renkler ve fotoğraflar olmalı mı?
Şart değildir. Sade bir wireframe içerik ve gezinme kararlarını daha erken fark etmenizi sağlayabilir.