Gerçekçi bir iPhone maketi nasıl oluşturulur: Araçlar ve kılavuz

iPhone mockup, uygulamanızın veya web sitenizin ekran görüntüsünü gerçek bir cihaz görseli üzerine yerleştirmenizi sağlayan görsel bir şablondur. Hızlıca kaliteli bir sonuç elde etmek için UI görevleri adına Figma Community'deki hazır şablonları veya fotorealistik sunumlar için Photoshop'ta Smart Objects içeren PSD dosyalarını kullanın.

Maketler, tasarımcılar için portfolyo, müşteriye sunumlar ve sosyal medya düzenlemeleri açısından gereklidir. Düz bir arayüzü somut bir ürüne dönüştürerek, kullanım kolaylığı ve estetiği bağlam içinde değerlendirmeye yardımcı olurlar.

Maket nedir ve neden gereklidir

Mockup (maket), çizim (wireframe) ile nihai ürün arasındaki ara aşamadır. Mobil tasarım bağlamında bu, ekranına tasarımınızın "yerleştirildiği" bir akıllı telefon görselidir.

Temel kullanım senaryoları:

• Portfolyo: UI tasarım becerilerini çekici bir ambalajda sergileme.
• Müşteri sunumu: Müşterinin sadece artboardlardan oluşan bir seti değil, nihai ürünü görmesine yardımcı olur.
• Pazarlama: App Store, açılış sayfaları ve sosyal ağlar için promosyon materyalleri oluşturma.

Kaliteli şablonlar nereden bulunur

Kaynak seçimi, kullandığınız araçlara ve gereken gerçekçilik düzeyine bağlıdır.

1. Figma Community

UI/UX tasarımcıları için en iyi seçim. Programlar arasında geçiş yapmadan doğrudan maket üzerinde çalışmanıza olanak tanır.

• Avantajları: İçeriğin hızlı değiştirilmesi, vektörel netlik, gölgelerin ve arka planın kolay ayarlanması.
• Nerede aranır: Community arama çubuğuna «iPhone Mockup» veya «Device Frames» yazın. Clay Mockups veya Artboard Presets gibi eklentilere dikkat edin.

2. PSD kütüphaneleri (Photoshop)

Yüksek detaylı renderlar için endüstri standardı.

• Popüler kaynaklar: LS Graphics, Unblast, Freepik, Pixeden.
• Avantajları: Smart Objects aracılığıyla ışık, yansımalar ve karmaşık perspektiflerle çalışma imkanı sunan fotorealizm.

3. Çevrimiçi oluşturucular

Yazılım kurulumu gerektirmeyen hızlı görevler için uygundur.

• Hizmetler: Canva, Renderforest, Kittl, Placeit.
• Avantajları: Minimum işlem, hazır sahneler (eli telefonu tutan biri, masada duran telefon).
• Dezavantajları: Sınırlı özelleştirme, yüksek çözünürlükte indirme için genellikle abonelik gerekir.

Talimat: Figma'da maket

Modern arayüz tasarımcıları için en hızlı yöntem.

1. Şablon bulun. Figma Community'ye gidin, beğendiğiniz dosyayı seçin ve «Open in Figma» veya «Duplicate» düğmesine tıklayın.
2. Ekran görüntüsünü hazırlayın. Tasarımınızın istenen çözünürlükte PNG/JPG olarak dışa aktarıldığından emin olun.
3. İçeriği değiştirme.
   • Çoğu şablonda telefon ekranı, ayrı bir frame veya maskeli (Clip Content) bir görseldir.
   • Ekran görüntünüzü bu frame'in içine sürükleyip bırakın.
   • Bir eklenti kullanılıyorsa (örneğin Mockup), tasarımlı artboard'u seçin ve cihazı seçerek eklentiyi çalıştırın.
4. Ayarlar. Gövde rengini (varsa), sahne arka planını ve gölge yoğunluğunu değiştirin.
5. Dışa aktarma. Ana frame'i seçin ve web için PNG'ye veya baskı için PDF'e dışa aktarın.

Talimat: Photoshop'ta maket

«Pahalı», fotorealistik görseller oluşturmak için kullanılır.

1. PSD dosyasını açın. İndirilen arşiv genellikle tek bir ana .psd dosyası içerir.
2. Smart Object'i bulun. Katmanlar panelinde «Your Design Here», «Screen» adlı veya katman önizlemesinin köşesinde küçük bir dosya simgesi olan katmanı bulun.
3. Düzenleme.
   • Smart Object'in küçük resmine çift tıklayın. Yeni bir pencere açılacaktır.
   • Ekran görüntünüzü buraya yapıştırın (Ctrl+V / Cmd+V).
   • Boyutu tuval sınırlarına göre ayarlayın (Ctrl+T / Cmd+T).
   • Değişiklikleri kaydedin (Ctrl+S / Cmd+S) ve Smart Object sekmesini kapatın.
4. Sonuç. Ana dosyaya döndüğünüzde, tasarımın perspektif ve distorsiyonlar dikkate alınarak ekrana otomatik olarak yerleştiğini göreceksiniz.
5. Finalizasyon. Gerekirse, sahne ışığına daha iyi uyum sağlaması için tasarım katmanının parlaklığını/kontrastını ayarlayın.

Araçların karşılaştırılması

İdeal bir maketin kriterleri

İyi bir maket, tasarımı satır; ondan dikkati dağıtmaz.

1. Arayüze odaklanma. Ekran, en kontrastlı ve okunabilir öğe olmalıdır. Önemli düğmeleri veya metni örten parlamalardan kaçının.
2. Doğal perspektif. Telefonun eğim açısı, kullanıcının cihazı gerçekten nasıl tuttuğuna veya masada nasıl durduğuna uygun olmalıdır.
3. Arka plan bağlamı. Arka plan, uygulamanın ruh halini tamamlamalıdır. Fintech için sıkı minimalizm, yaşam tarzı uygulamaları için rahat iç mekanlar veya doğa.
4. Güncel model. Uygulamanız retro olarak konumlandırılmıyorsa, modern iPhone modellerini (Home düğmesiz, Dynamic Island veya ince çerçeveli) kullanın.

Sık yapılan hatalar

• Orantısızlık. Ekran görüntüsünün gerilmesi nedeniyle yuvarlak düğmelerin oval hale gelmesi ve yazı tiplerinin bozulması. Her zaman en-boy oranını koruyun.
• «Kirli» kenarlar. Yanlış mask kırpma nedeniyle ekran kenarlarında görünen pikseller veya beyaz şeritler.
• Durum çubuğunun ihmal edilmesi. Unutulan «standart» durum çubuğu (saat 9:41, tam pil), gerçek ekran görüntüsünde saat farklıysa veya bildirim varsa doğal görünmeyebilir. Nötr yer tutucular veya cihazdan alınan gerçek ekran görüntüleri kullanmak daha iyidir.
• Efektlerin aşırı yüklenmesi. Aşırı gölgeler, bulanıklıklar ve filtreler resmi ucuz gösterir.

SSS

Şeffaf arka plana sahip iPhone maketi nereden bulunur? Figma'da bu kolaydır: cihaz frame'inin arka planını silmeniz yeterlidir. Photoshop'ta, PNG olarak dışa aktarmadan önce sahne arka planı katmanlarının görünürlüğünü kapatmanız gerekir.

Behance/Dribbble'daki portfolyo için hangi format daha iyidir? Dribbble için PNG formatında parlak, yakın çekimler uygundur. Behance için ise bir seri kullanmak daha iyidir: genel görünüm, arayüz detayları, elde kullanım. Burada çizgi temizliği nedeniyle Figma maketleri tercih edilir.

Maket ücretsiz olarak yapılabilir mi? Evet. Figma Community binlerce ücretsiz şablon sunar. Ayrıca birçok site (Unblast, LS Graphics) yüksek kaliteli ücretsiz PSD maketleri bölümlerine sahiptir.

Dynamic Island özellikli iPhone 15/16 maketi nasıl yapılır? «iPhone 14 Pro/15/16» veya «Dynamic Island» etiketli şablonları arayın. Figma'da birçok yazar kütüphanelerini güncellemektedir. Eski bir şablon kullanıyorsanız, ekranın üst kısmına manuel olarak siyah bir «ada» ekleyebilirsiniz, ancak güncel bir kaynak bulmak daha kolaydır.