Rehber

Mockup Nedir, Neden Yapılır?

Yazar
Onur Yılmaz

Bu İçerikte Yer Alan Ana Başlıklar:

Mockup Nedir?

Wireframe, Mockup ve Prototipleme Arasındaki Farklar

Mockup Neden Yapılır?

Mockup Üzerinden Gösterilen Bileşenler

Mockup Hazırlayabileceğiniz Araçlar

Ücretsiz Mockup Taslak Siteleri

Bu yazımız ile; bir tasarımın duyu organlarıyla algılanabilecek bir şekilde modellenip test edilmesini ya da sunulmasını sağlayan yöntemlerden biri olan Mockup yöntemini inceleyeceğiz. Mockup tasarım sektöründe çoğu alanda kullanılan bir yöntem olmasına rağmen bu yazımız UI tasarımındaki Mockup tanımı üzerine olacaktır.

Userspots Akademi'de online olarak devam eden Design Sprint ile UI/UX Eğitimi'ne katılarak karar/sorun çözme aşamalarında mockup ve diğer prototipleme yöntemlerini kullanarak test etme ve sunma becerilerinizi geliştirebilir; UI Eğitimi'ne katılarak kullanıcı dostu arayüz tasarımı konusunda kendinizi geliştirip, sektörde yer edinebilirsiniz. Ayrıca online olarak devam eden Uygulamalı Figma Eğitimi ile son zamanların popüler uygulamasını tüm detaylarıyla öğrenebilir, arayüzlerinizi bu program üzerinden etkin bir şekilde tasarlayabilirsiniz.



Mockup Nedir?

Mockup, bir servisin, bir ürünün veya bir arayüzün duyu organlarına hitap edecek şekilde modellenip, test edilebildiği ya da sunulabildiği bir modelleme yöntemidir. UI tasarımında da sıklıkla kullanılan mockup yöntemi ise daha çok görsel ağırlıklıdır. Yapılan arayüz tasarımında kullanılan renkler, yazı tipleri ve boyutları, içerik görselleri, ikon kullanımları ve bunların birbiriyle olan uyumları mockup modelleme sayesinde tasarımcı tarafından gözlemlenebilir, müşteriye sunmak veya portfolyonuza koymak için kullanabilir. Kısacası mockup, yapılan tasarımın görsel olarak zenginleştirildiği ve statik bir şekilde sunulduğu bir tasarım modelleme yöntemidir.

Mockup, Wireframe ve Prototip Arasındaki Farklar

Alphalogic; Sketch vs Wireframe vs Mockup vs Prototype

Mockup yöntemi, bazı zamanlar wireframe ve prototip yöntemleriyle karıştırılabilir. Genellikle bir arada anılan ve yakın süreçlere sahip olan bu 3 terim, bazı durumlarda birbirlerine yakın olsalar da tasarım sürecinde farklı aşamalarda tasarımcıya yardımcı olurlar.

• Wireframe ve Mockup farkı nedir?

Quora; Whats the difference between wireframe and mockup

Wireframe tasarım mimarisini oluşturma aşamasında kullanılırken, mockup tasarımın görsel bileşenler ile son kullanıcı tarafından nasıl görüneceğini göstermek için kullanılır.

Wireframe, yapılan tasarımı basit görseller ya da geometrik şekiller kullanarak, mimarisinin oluşturulduğu bir yöntemdir. Wireframe yapmaktaki amaç görsel görünüşün aksine, tasarımın yapı bileşenlerini yerleştirmek ve bunların birbirleri arasındaki ilişkiyi kurmaktır. Hangi elementlerin, nereye, nasıl, ne zaman, ve nereden geleceği genellikle basit renksiz kutular üzerinden planlanan bu evre, inşa edilecek evin teknik çiziminin yapılmasına benzetilebilir.

Mockup ise, wireframe aşamasından farklı olarak görsel ağırlıklı bir gösterim diline sahiptir. Tasarım içinde kullanılacak renklerin, görsellerin, yazı tiplerinin ve diğer bileşenlerin birbiriyle uyumları gözlemlenir. Genellikle, wireframe aşamasından sonra, tasarımın çalıştığını test etmek veya tasarımı sunmak için kullanılır. Mockup için, inşa edilen evin boyandığı, eşyalarının yerleştirilip ev içindeki düzenlerine bakıldığı aşama diyebiliriz. Mockup aşamasında fark edilen eksiklerden sonra wireframe aşamasına dönülebilir ve revizeler yapılıp tekrardan mockup sürecinde test edilebilir.

Mockup aşamasının wireframe sürecinden önce tasarlandığı, daha sonra fark edilen sistem eksiklikleri üzerinden wireframe yöntemine geçilip eksikliklerin giderildiği bir tasarım süreci de izlenebilir. Ancak benim tavsiyem önce wireframe işlemini gerçekleştirmeniz yönünde olacaktır. Temeli sağlam oturmamış bir ev ne kadar güzel gözükürse gözüksün, elbet bir gün yıkılacaktır.

Ayrıca wireframe hakkında daha detaylı bilgiler öğrenmek isterseniz ‘Wireframe Nedir?’ yazımıza bakabilirsiniz. :)

• Mockup ve Prototip farkı nedir?

wireframe vs mockup vs prototype


Mockup, tasarımın görsel anlamda nasıl görüneceğini gösterirken, prototip tasarımın bir bütün olarak nasıl çalıştığını gösterir.

Prototip, görselleştirilmiş bir arayüz tasarımının bir bütün olarak nasıl çalıştığının denendiği ya da sunulduğu bir tasarım sürecidir. Tasarımdaki bileşenlerin nerede konumlanacağı ve görsel olarak nasıl belirtildiği netleştikten sonra, bileşenler ve sayfalar arasındaki geçişler bu süreçte gözlemlenir. Bir butona tıkladığımda ne olacak, bir sayfadan diğerine nasıl bir geçiş olacak, görseller nasıl kayacak gibi noktalar bu aşamada test edilir. Bir tasarımın son kullanıcıya sunulacak en yakın hali bu aşamada ortaya çıkar.

Mockup ise statik bir tasarıma sahiptir. Butonların, görsellerin; nerede, nasıl konumlanacağını bize gösterir ama bu elementlerle işlevsel olarak bu süreçte çalışamayız. Wireframe ve Mockup aşamasında alınan kararlardan sonra geçilen prototip sürecinde, tasarım işlevselliği ve diğer bağlamlarla olan ilişkisi gözlemlenir. Bir sorun ile karşılaşıldığında ise diğer adımlara geri dönülebilir ya da bu süreç üzerinden revizeler gerçekleştirilebilir. Eğer bir evin inşaatı üzerinden yorumlarsak prototip modelleme, boyanmış ve eşyaları yerleştirilmiş bir evde tur atmak ve yerleştirilen eşyaların nasıl kullanıldığını görmek olarak düşünebiliriz.

Prototip yöntemleri hakkında daha fazla bilgi sahibi olmak isterseniz ‘Prototipleme Nedir, Nasıl Yapılır?’ yazımıza ulaşabilirsiniz.

Aynı zamanda Userspots Akademi’de eğitim veren Ferdi Çıldız’ın Figma üzerinden hazırladığı prototip videosunu izleyebilir, prototip sisteminin nasıl çalıştığını ve Figma üzerinden nasıl yapıldığını eğitmenimizin anlatımıyla öğrenebilirsiniz. Ferdi Çıldız'ın vermiş olduğu Figma eğitimleri ile ilgili daha detaylı bilgiye buradan ulaşabilirsiniz.

Mockup Neden Yapılır?

• Gerçekçi bir görünüş

Yapılan arayüz tasarımlarının son kullanıcıya gösterilecek haline yakın bir deneyim sunar. Mockup modellemesi yapılan sayfa bizlere, renk, tipografi, ikonografi ve diğer görsel bileşenlerle gösterilir. Tasarım hakkında ‘Evet, bu şekilde bir sonuç elde edeceğiz’ denilmesini sağlar.


• Görsel bir sunum

Bir müşteri ile çalışıyorsanız ya da portfolyonuza yaptığınız arayüz tasarımlarını koymak istiyorsanız, mockup görsel bir sunum için en ideal yöntemlerden birisidir. Wireframe tasarımınız yaptığınız arayüz hakkında yeterli bir sunum materyali oluşturmayabilir ama 1-2 mockup örneği bile yaptığınız iş hakkında daha detaylı bilgi vermenizi sağlayabilir. Prototipleme aşamasına geçene kadar, müşterinizi mockup örneklerinizle son kullanıcının göreceği ürün hakkında bilgilendirmeye devam edebilirsiniz. Ayrıca tasarımınızı portfolyonuzda mockup modellemeleri ile etkin bir şekilde sunabilirsiniz.

• Konsept daraltmak

Mockup aynı zamanda konseptlerinizi daraltmak için de kullanabileceğiniz yöntemlerden bir tanesidir. ‘Hangi renkleri kullanabilirim?’, ‘Hangi ikon dili bu sayfaya uygun olabilir?’ gibi başlangıçta sizleri kaygılandıran görsel ağırlıklı tasarımsal sorunları, düşük kaliteli mockuplar yaratarak hızlıca deneyebilir, bu yöntem sayesinde kullanacağınız görsel bileşenler üzerine hızlıca karar verebilirsiniz.

• Revizyon kontrolü

Tasarımınızın, son kullanıcıya sunulmadan önce görsel olarak nasıl görüneceğini görmek, mockup yöntemini UI tasarımı için vazgeçilmez bir süreç haline getirmektedir. Tasarımınızı mockup üzerinde denemeniz, önceden de bahsettiğimiz gibi ‘Demek böyle bir şey olacak.’ demenize katkı sağlayacaktır. Bunun yanında tasarımdaki eksik kısımları görmek veya yansıtmak istediklerinizi test etmek için de sizlere yardımcı olur. Düşük kaliteli veya yüksek kaliteli fark etmez, tasarım sürecinde mockup modelleri yaratmak tasarımınız üzerine size daima geri bildirim verecektir.

Mockup Üzerinden Gösterilen Bileşenler


Mockup aşamasında yapılacak görselleştirmenin de statik (fotoğraf) olacağını tekrardan hatırlatarak mockup sürecinde gösterilebilecek temel bileşenlere bir bakalım.

• Renk uyumu

Mockup denemesi ya da denemeleri üzerinden, renk paletinizdeki renkleri bileşenler üzerinde deneyebilir, renklerin kontrast dengelerini gözlemleyebilirsiniz.

• Tipografi

Mockup denemeleri sayesinde, yaptığınız tasarımdaki tipografik (yazı fontu, yazı boyutu, yazı boşluğu vb.) bileşenlerin kullanımlarını da gözlemleyebilir, diğer bileşenler ile uyumunu kontrol edebilirsiniz veya gösterebilirsiniz.

• Beyaz alan kullanımı

Wireframe sürecinde bazen gözden kaçabilen, bileşenler arasındaki boşluk mockup modellemeleriniz sayesinde daha detaylı görülebilir. Bu boşlukları bir mockup modellemesinde tespit edebilir ve tasarımınıza iyileştirecek düzenlemeler yapabilirsiniz.

• Yönlendirme elemanları

Wireframe aşamasında kutular ile belirlediğiniz butonlar, menüler, geri dön tuşları gibi yönlendirme elemanlarının birbirleri arasındaki düzenleri, sahip olduğu renkler ve diğer bileşenler ile uyumunu mockup modelleme sürecinde daha detaylı gözlemleyebilirsiniz.

• İkon görünüşleri

Mockup süreci diğer görsel bileşenlerde olduğu gibi, ikonların genel tasarım dili ile uyumunu keşfetmek adına da sizlere oldukça yardımcı olacaktır. Mockup modellemeleri ile tasarladığınız ya da temin ettiğiniz ikonları diğer görsel bileşenlerle görerek revizeler yapabilir, tasarımınızı iyileştirebilirsiniz.

Mockup Hazırlayabileceğiniz Araçlar

Photoshop üzerinden yüksek kaliteli mockup tasarımı

Tasarım sürecinin orta ve son aşamalarında kullanılan tasarım programları ve siteleri üzerinden tasarımlarınızın mockuplarını yapabilirsiniz.Bu bilgisayar programlarına ve sitelerine örnek olarak Adobe photoshop, Adobe XD, Figma ve Sketch programları örnekleri verilebilir. Yukarıdaki fotoğrafta photoshop üzerinden yapılan bir mockup örneği var. Eğer fotoğrafta verilen örnek gibi, programlar ve siteler üzerinden kaliteli mockup modellemesiyle bu şekilde uğraşmak istemiyorsanız, aşağıdaki kısımda sizler için hazır ve ücretsiz şekilde kullanabileceğiniz, Userspots ekibi tarafından sıkça kullanılan bir kaç mockup taslağı sitesi ve programı önerisinde bulunduk.


Ücretsiz Mockup Taslak Siteleri

Mockup taslak siteleri sayesinde, portfolyo, sosyal medya paylaşımları ve müşteri sunumlarında kullanabileceğiniz kaliteli ve kolay bir şekilde hazırlanan görseller elde edebilirsiniz. İşte Userspots ekibi tarafından kullanılan, ve sizlere tavsiye ettiğimiz mockup taslak siteleri ve programları...


Freepik


Her tasarıma uygun yüzlerce çeşit mockup taslağına sahip olan Freepik sitesi, yaptığınız arayüz ve diğer tasarımlarınızı etkili bir şekilde sunmanızda yardımcı olacaktır. Bu site üzerinden bir çok ücretsiz mockup taslağını indirip, Photoshop üzerinden tasarımlarınızı bu taslakların içine yerleştirebilirsiniz.


Eğer tasarımınızı Figma üzerinden yaptıysanız ve Freepik modellerini kullanmak istiyorsanız, Figma üzerinden plugin'ini de kullanabilirsiniz.

Freepik sitesi hakkında daha fazlasını öğrenmek istiyorsanız, buradan siteye ulaşabilirsiniz.


Pixeden


Sizlere birçok farklı model sunan diğer bir mockup sitesi ise Pixeden. Bu site üzerinden de bazı modelleri ücretsiz bir şekilde cihazınıza indirebilir, Photoshop üzerinden arayüz tasarımlarınızı beğendiğiniz modeller üzerinde deneyebilirsiniz.

Pixeden sitesindeki mockup modellerini keşfetmek isterseniz, buraya tıklayarak siteye ulaşabilirsiniz.

Mockuuups.studio

Windows ve MacOs yazılımlar için uyumlu olan bu program, sizlere bir çok mockup modeli sunarken, tasarımlarınızı aynı anda modeller üzerinde deneme imkanını sunuyor. Bu program hakkında daha fazla bilgi almak ve mockup taslaklarını görmek isterseniz siteye buradan ulaşabilirsiniz.

Rotato


Windows ve MacOs ile uyumlu bir şekilde çalışan ve deneme sürümü ücretsiz olan diğer tavsiye programımız ise Rotato. Bu uygulama, yaptığınız tasarımları cihazların ekranlarında denerken, ekrana baktığınız açıları değiştirebilir ve farklı açılardan gelen mockup modellerinizi video şeklinde kaydedebilirsiniz. Bu program ile alakalı daha fazla bilgi almak istiyorsanız buradan internet sitelerine bir göz atabilirsiniz.

Placeit


Dilediğiniz bir tarayıcı üzerinden erişebileceğiniz bu site, herhangi bir indirme yapmadan sizlere mockup tasarımlarınızı hazırlama imkanı tanıyor. Sitede hazırlanmış birçok mockup taslağı arasından birini seçiyorsunuz, tasarımlarınızı siteye yüklüyorsunuz, eğer varsa logonuzu ve mottonuzu da buraya yazdınız mı tamam, elinizde sunmak için bir mockup modeli hazır. Site üzerinden 1 dakikadan kısa sürede hazırladığımız mockup örneğinimizi yukarıdaki fotoğrafta görebilirsiniz. Herhangi bir indirme işlemi yapmadan mockup modelleri deneyebileceğiniz bu siteye ise buradan ulaşabilirsiniz.

İlgili Diğer Rehber Yazılarımız

Rehber
Figma Nedir, Nasıl Kullanılır?
Rehber
Prototip Nedir, Nasıl Yapılır?
Rehber
UX Tasarım Rolleri
Rehber
2021 Müşteri Deneyimi Trendleri
Online Eğitim
UI Eğitimi

Cihazlar ve kullanıcılar arasındaki etkileşimi kolaylaştıran arayüzler nasıl tasarlanır?

28 Aralık 2021 - 1 Şubat 2022

Space Konularımız

Userspots Bülten
Her ay tasarım ve teknoloji üzerine yeni stiller, dijital ürünler, projeleriniz için kaynaklar, tasarım ilhamları ve daha fazlasına sahip bülten.
2300’den fazla kişinin kayıtlı olduğu kulübümüze katıl !
Başvuru için teşekkürler. En kısa sürede sizinle iletişime geçeceğiz.
Lütfen eksik bilgileri tamamlayıp, tekrar deneyin.