Mockup ne işe yarar
Bir ekran görüntüsü tek başına düz ve bağlamsız durur. Aynı görüntüyü bir telefonun içine koyduğunda bakan kişi ürünü elinde tutuyormuş gibi hisseder. Fark küçük gibi görünür ama reklam görsellerinde ve mağaza sayfalarında tıklanma oranını değiştirecek kadar büyüktür.
Mockup'lar en çok şu yerlerde kullanılır:
- App Store ve Google Play sayfalarındaki ekran görüntüleri
- Web sitelerinin ana görselleri ve ürün tanıtım videoları
- Instagram, TikTok ve LinkedIn paylaşımları
- Müşteriye yapılan tasarım sunumları ve portfolyolar
- Yatırımcı sunumları
Tasarımcılar için bir de pratik tarafı var: müşteri, düz bir PNG'ye bakarken "bu telefonda nasıl duracak?" diye sorar. Mockup bu soruyu baştan yanıtlar.
Mockup türleri
Bugün üç ana tür görüyoruz ve her birinin güçlü olduğu yer farklı.
Düz (2D) mockup
Ekran görüntüsü, cihazın önden çekilmiş bir çerçevesine yerleştirilir. Hızlıdır, dosya boyutu küçüktür, App Store görselleri için çoğu zaman yeterlidir. Eksik tarafı, her şeyin aynı açıdan görünmesidir.
Fotoğraf mockup'ı
Gerçek bir fotoğraf çekilir, örneğin elde tutulan bir telefon ya da masadaki bir laptop. Ekran alanı işaretlenir ve tasarım perspektife uygun şekilde içine oturtulur. Sonuç en doğal görünen türdür, çünkü ışık ve ortam gerçek. Sosyal medya ve web sitesi görsellerinde çok iyi çalışır.
3D mockup ve mockup videosu
Cihazın üç boyutlu bir modeli kullanılır. Telefonu istediğin açıya çevirebilir, ışığı değiştirebilir, gölgenin yerini ayarlayabilirsin. Asıl gücü harekettir: cihaz dönerken ya da laptop açılırken ekranında senin uygulaman oynar. Tanıtım videoları ve App Store önizlemeleri için bugün en çok tercih edilen tür bu.
Mockup, wireframe ve prototip arasındaki fark
Bu üç kelime sık karıştırılıyor. Wireframe ekranın iskeletidir: kutular, çizgiler ve yazı yerleri vardır, renk ve görsel yoktur, neyin nerede duracağını konuşmak için kullanılır. Prototip tıklanabilir bir modeldir; kullanıcı bir butona bastığında sonraki ekrana geçer ve genelde kullanıcı testinde kullanılır.
Mockup ise bitmiş ya da bitmeye yakın tasarımın gerçek bir ortamda nasıl görüneceğini gösterir. Tıklanmaz, göstermek için vardır.
Daha uzun bir karşılaştırmayı mockup, wireframe ve prototip farkı yazımızda bulabilirsin.
Mockup nasıl yapılır
Eskiden iki yol vardı: Photoshop'ta akıllı nesneli bir PSD dosyası açmak ya da Blender, Cinema 4D gibi bir 3D programında sahne kurmak. İlki hızlı ama sınırlı, ikincisi güçlü ama öğrenmesi haftalar alıyor.
Bugün bu iş için yapılmış uygulamalar var. Mockup Center'da süreç şöyle işliyor:
- Ekran görüntünü ya da ekran kaydını uygulamaya sürükle.
- Bir cihaz seç (iPhone, Galaxy, iPad, MacBook, Apple Watch ve diğerleri) ya da hazır bir animasyonlu şablon aç.
- Açıyı, ışığı ve arka planı ayarla, sonra PNG ya da video olarak dışa aktar.
Adım adım anlatım için mockup nasıl yapılır rehberine bakabilirsin.
İyi bir mockup'ı ne ayırır
Yıllardır mağaza sayfalarına ve lansman görsellerine bakıyoruz. İyi çalışanlarda birkaç ortak nokta var:
- Ekran görüntüsü keskin. Bulanık bir ekran, en pahalı 3D sahneyi bile ucuz gösterir. Kaynak görseli cihazın gerçek çözünürlüğünde almak en iyisi.
- Durum çubuğu temiz: saat 9:41, pil dolu, bildirim yok. Küçük bir ayrıntı ama dikkat çekiyor.
- Arka plan ürünle yarışmıyor. Çok renkli bir arka plan, ekrandaki içeriği bastırır.
- Tek bir şey anlatıyor. Her görselde bir özellik, bir başlık.
