Mockup Nedir?

Mockup (Mock-up) nedir? Web sitelerinin, mobil uygulamaların, masaüstü, tablet, telefon görünümlerinden; kartvizit, broşür, katalog tasarımlarına, araç giydirme, tabela, bilbord tasarımlarından tişört tasarımlarına kadar her alan için mockuplar bulunmaktadır. Hazırlanan tasarımın uygulanacak alan ve yüzeyde nasıl görüneceğinin (görseller, metin kullanımı, tipografi, renkler ve diğer grafik elemanlar) oluşturulması amacıyla kullanılır. 

Mockup nedir?

Mockup, yapılan projelerin tasarımlarının son kullanıcıya yani müşteriye sunulması için yapılan tasarımdır.

Renkler, metin, içerik tipografi, renkler ve diğer grafik elemanlar uygulanacak cihaz veya mekan görüntüsü içerisinde farklı bir etki oluşturabilir. Mockuplar tasarımdaki malzemenin değerlendirilebilmesi, tasarımın yer alacağı alanın netleştirilmesi amacıyla sıklıkla uygulanırlar. Bu sayfada yer alan yer alan görseller de mockupa örnek gösterilebilir.

Mockup nedir? Web site masaüstü -mockup

Mockup’lar ürünün hemen hemen hiçbir fonksiyonunu yerine getirmez, sadece 3D model olarak daha iyi bir şekilde fiziksel özelliklerini anlamamızı sağlar. Genellikle tüketici elektroniğinde karşımıza çıkar. Böylelikle iş, model ve tasarım anlamında müşteriye sunulur.

Mockup’lar genellikle wireframe (şema tasarım) sürecinden sonra sunulurlar. Wireframe’den farklı olarak, mockup’lar işin görseldeki görünümünü ortaya koyar. Bu sebeple genellikle işin tamamından ziyade öne çıkan temel bazı noktaların seçilip, mockup olarak sunulması yeterli olur. Yani, tasarım ve geliştirme ekibi wireframelerle sürece başlar ve son kullanıcıya sunulacak ögeleri mockuplarla pekiştirirler.

Mockup Örnekleri

Kupa Mockup

Örneğin bir senaryo çizelim. Duvara asmak için tasarım şablonları yapıyorsunuz ve müşterilerinize ürünlerinizin tasarımlarını göstermek istiyorsunuz. Aşağıdaki gibi farklı tasarımsal Mockuplar yapabilirsiniz. Aşağıda gördüğünüz çerçeve aslında bir şablondur. Bu şablonu kullanarak çerçevenin içerisine istediğimiz uygun boyutta başka bir görseli ya da tasarımı yerleştirebiliriz. Çerçeve içerisine bir tasarım, aile, manzara fotoğrafı koyabilirsiniz. Böylece sunum için elimizde sade bir görselden ziyade çok daha şık bir görsel olabilir.

Web sitesinin mockuplarını oluşturmak istiyorsunuz. Müşterinize responsive olduğunu ve farklı cihazlarda kayma olmadan sitenin görünümlerini, tasarımlarını paylaşacaksınız. Mockupları kullanarak bunu efektif bir şekilde gerçekleştirebilirsiniz. Aşağıya örnek masaüstü tasarımını bırakıyorum.

Cep telefonu satan mağaza vitrinlerinde görülen cihazlar ya da bir otomotiv firmasında tasarım bölümünün üst yönetim için (prototip ve seri üretim öncesinde) hazırladığı araç kabini mockuptır.

Mockup Nasıl Hazırlanır?

Mockuplar genellikle programlarla hazırlanmakta, ışık, gölge ve benzeri özellikleri kendiliğinden sunmakta ve temel görselin değiştirilmesi ile uyarlama sürecini sonlandırmaktadırlar.

Mockup Nasıl Kullanılır?

Mockuplar genellikle grafikerlerin en çok tercih ettiği grafik yazılımı olan Adobe Photoshop için tasarlanır ve bu taslaklar .PSD uzantısına sahip olurlar. Bu şekilde bir Mockup’ı açtığınızda düzenlemeniz için takip etmeniz gereken adımlar her birinde farklı olabilir. Çoğunlukla Smart Object adı verilen sistem kullanılır. Bu tür mockup’larda;

– Mockup dosyasının katmanları arasında değiştireceğiniz katmanı bulun.
– Çift tıklayarak katman ayrı bir sekme olarak açılacaktır. Şimdi kullanmak istediğiniz görseli yerleştirip, uygun şekilde boyutlandırın.
-Menü yardımıyla veya klavyenizden CTRL + S kısayol tuşunu takip ederek işleminizi kaydedin.
-Sekmeyi kapattığınızda görselinizin mockup modeline işlenmiş olduğunu göreceksiniz.
-Bu adımları mockup’ın düzenlenebilir tüm katmanları için uygulamayı unutmayın.
-Düzenleme işleminiz tümüyle bittiğinde görseli “Web için Kaydet” veya diğer kayıt yöntemleriyle dışarıya aktarabilirsiniz.


Örnek Mockup Siteleri

Mockup taslaklarına internet üzerindeki birçok grafik sitesinden erişebilirsiniz. Bilgisayarınıza indireceğiniz ücretli veya ücretsiz mockup şablonları sayesinde tasarımlarınızı özelleştirebilirsiniz. Adobe Photoshop veya Online Photoshop programı olan Photopea kullanabilirsiniz. Aşağıda hem psd uzantılı indirip Photoshop programlarında düzenleyebileceğiniz hem de online olarak programa ihtiyaç duymadan yapabileceğiniz mockup siteleri bulunmaktadır.

Mockup Örnek Siteleri

  1. pixeden.com

    Ücretsiz ve premium seçenekleri ile grafik, web ve tasarım kaynakları ile en çok tercih edilen, tasarımcının ihtiyaçlarını tek bir noktadan oluşturmasını sağlayan Mockup sitelerinden biridir. Yüksek kaliteli grafik şablonları, PSD tasarımları ile birçok seçenek sunar.

  2. behance.net

    Behance, içeriğine istenilen sayıda proje yüklenilmesine fırsat veren ücretsiz çevrimiçi bir dijital porftolyo paylaşım platformudur. Aaradığınız çok fazla özelliği bu platformda bulabilirsiniz.

  3. graphicburger.com

    GraphicBurger, tasarımlarınızı uygulamanız için ücretsiz ve çeşitli Mockup şablonlarından yararlanabileceğiniz ücretsiz Mockup sitelerinden biridir. Photoshop’a gerek olmadan hızlı ve kolay bir şekilde istenilen çözünürlükte tasarım oluşturmaya olanak sağlar.

  4. medialoot.com

  5. freebiesbug.com/

  6. magicmockups.com/

    Magic Mockups kaliteli 3D şablonları ile farklı tasarımlar sağlıyor. 25’ten fazla freebie ile her platformda kullanabileceğiniz .jpeg formatında Mockuplar bulunuyor.

  7. freepik.com/

  8. mockupsjar.com/

    Ücretsiz şablonlar sunan MockupsJar Android, Iphone, Macbook gibi her cihazda kullanılabilmeye imkan tanır. Uygun fiyatlarla farklı ve güzel şablonlarda bulunmaktadır. Freebieleri indirmek istediğiniz ölçüleri ise siz tercih edebilirsiniz.

  9. smartmockups.com/

    Ücretsiz bir platformdur. Sağladığı filtremeler ile gerekli Mockupı daha hızlı bulabilmeye imkan tanır. Örneğin mekana göre filtrelemeler yapabilirsiniz. Sitesinde ya da uygulamasında farklı çözünürlüklerde projeler kullanabilirsiniz.

2 yorum
Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bunları da okumak ister misiniz