Mockup, bir web sayfasının veya uygulamasının nihai tasarım öğelerinin çoğunu içeren ancak işlevsel olmayan statik tasarımıdır. Canlı bir sayfa kadar gösterişli değildir ve genellikle bazı yer tutucu(placeholder) verileri içerir.
Statik tasarım olarak bir mockup, canlı bir web sitesinin işlevselliğine sahip değildir. Örneğin, bir mockup renkli bir CTA düğmesi içerse de, bir web sitesinin (veya bir web sitesinin prototipinin) aksine tıklandığında bir form açmaz.
Mockup tasarımı yapmak, web sitesi geliştirmenin ilk aşaması değildir, bitmiş bir ürün olma yolundadır, ancak daha gidecek çok yolu vardır. Web sitesinin veya tasarımın nasıl davranacağına değil, nasıl görüneceğine dair iyi bir fikir vermesi amaçlanmıştır.
Sonuç olarak bir mockup, bir web sayfasının veya uygulamanın ne olduğunun görsel bir taslağı olarak hizmet eder. Bir fikre veya “wireframe”e hayat vermek için yaratılmıştır ve bir tasarımcının çeşitli görsel öğelerin birlikte nasıl çalıştığını test etmesine olanak tanır.
Mockup Ne İşe Yarar?
- Tasarımdaki paydaşlara düzen, renk, resimler, stiller ve daha fazlasında değişiklik önerilerinde bulunurken o sayfanın nasıl görüneceğini görme yeteneği verir.
- İkincil bir renk kullanarak bir sayfanın nasıl görüneceğini merak ediyorsanız, ikinci bir versiyonunu yaparak bunun nasıl görüneceğini test edebilirsiniz. Benzer şekilde bir değişiklik yapmak isterseniz, “mockup” ekibin bu olası değişikliğin nasıl görünebileceğini görmesine izin verebilir.
- Belirli bir amaç düşünülerek belirli bir amaç için bir sayfa oluşturulmalıdır. Mockup’lar, ekibe, bir UI tasarımcısı tarafından bir wireframe ile oluşturulan düzen aracılığıyla bu amaca nasıl ulaşılabileceğini ve bu düzenin marka standartları ve görsel yaratıcılık kullanılarak nasıl hayata geçirilebileceğini görme şansı verir.
- Erken revizyonlar için faydalıdır. Bir dijital tasarım aracında (Figma, Sketch gibi) revizyon yapmak sonraki kodlama aşamalarına göre daha kolaydır. Zaman kazandırır.
Neler İçerir?
En basit ifadeyle, bir UI “mockup”ı, temsil ettiği sayfanın yapısıyla aynı olmalıdır. Bu, mockup aşamasında şunları göz önünde bulundurmanız gerektiği anlamına gelir:
- İçerik Düzeni: Mockup öncesinde oluşturulan “wireframe”de zaten belirlenen “layout” mockup çalışmasında da pekiştirilir. F modeli veya Z modeli, kartlar veya metin gibi içeriğin nasıl görüntülendiği konuları içerir. Ayrıca her bir içerik parçasının boyutunu ve aynı anda ekrana kaç tane sığdırmak istenildiği göz önünde bulundurulmalıdır.
- Kontrast: Metninizin okunabilirliğini ve harekete geçirici mesajlar (CTA) gibi bazı öğelerin görünürlüğünü artırmak için renk kontrastı kullanılır.
- Renk Kullanımı: Renkler farklı duygular uyandırır ve etkileri çevredeki renklere göre değişir. Hedef kitlesine, sektörüne ve verilmek istenen duyguya göre renk paleti oluşturulur ve renkler kullanılır.
- Tipografi: Tipografi boyutunuzu, yazı tipinizi, stilinizi ve aralığınızı keşfetmenize olanak tanır.
- Boşluk — Negatif alan doldurulacak boş alan değildir, güçlü bir tasarım öğesidir. Uygun ayarlanan boşluk, kullanıcının anlamasını ve okunabilirliğini geliştirir ve görsel hiyerarşide güçlü bir araç görevi görür. Bir öğenin etrafındaki negatif alan ne kadar fazlaysa, göz o kadar fazla o noktaya odaklanır.
- Navigasyon Görseli: Şimdiye kadar bilgi mimarisi bitmiş olmalıdır, bu yüzden sadece nasıl görüneceğini düşünmeniz gerekir. Örneğin, bir dropdown menünüz varsa, artık renk, aralık, tipografi ve düzen gibi ayrıntılara girebilirsiniz.
