Bu İçerikte Yer Alan Ana Başlıklar:
• Wireframe, Mockup ve Prototipleme Arasındaki Farklar
• 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, 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 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?
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?
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.
• 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 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.
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.
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.
-min.jpg)
