2014 yılında Rembrant Van der Mijnsbrugge ile birlikte MOTE ajansını kurdum. E-ticaret alanında uzmanlaşan ajansımız, müşterileriyle marka yolculuklarının her aşamasında—ilk pazar stratejisinden marka kimliğine, tasarım ve geliştirmeden pazarlamaya kadar—sürdürülebilir büyüme odağıyla iş birliği yapıyor. 15 yıllık e-ticaret web tasarımı deneyimim boyunca, bağımsız markalardan Fortune 500 şirketlerine kadar uzanan geniş bir müşteri yelpazesinin stratejilerini şekillendirdim. Kariyerim boyunca edindiğim web tasarımı ipuçlarını ve deneyimlerimi paylaşmaktan büyük heyecan duyuyorum.
Hazır bir web sitesi teması düzenlemek oldukça kolaydır. Örneğin, sitenizin satır başına dört ürün yerine iki ürünle nasıl görüneceğini saniyeler içinde önizleyebilirsiniz. Ancak tamamen özel tasarlanmış bir web sitesinde kod üzerinde değişiklik yapmak hem zaman alıcı hem de maliyetli olabilir. Bu nedenle tasarımcılar, geliştirme aşamasına geçmeden önce web sitesi mockup’ları oluşturur.
Bu makalede web sitesi mockup’larının ne olduğunu öğrenecek, kendi web sitesi mockup’ınızı oluşturmak için kullanabileceğiniz araçları ve en iyi uygulamaları keşfedeceksiniz.
Web sitesi mockup’ı nedir?
Bir web sitesi mockup’ı, bir web sitesinin nasıl görüneceğini gösteren statik bir görsel önizlemedir. Sitenin nihai tasarımı ve yerleşimi hakkında fikir verir; ancak siteyi etkileşimli ve yayına hazır hâle getiren arka uç kodlarını henüz içermez. Web tasarımcıları, tasarımı kodlama için geliştirme ekibine devretmeden önce farklı tasarım seçeneklerini değerlendirmek amacıyla web sitesi mockup’ları oluşturur. Bir web sitesi kodlandıktan sonra değişiklik yapmak daha zor hâle gelir. Bu nedenle yüksek doğrulukta, nihai ürüne mümkün olduğunca yakın hazırlanan bir web sitesi mockup’ı zaman ve maliyet tasarrufu sağlayabilir.
Web sitesi mockup’ları, wireframe’ler ve prototiplerin karşılaştırması
Wireframe’ler, mockup’lar ve prototipler bir tasarım fikrini görselleştirmenin farklı yöntemleridir. İşte her birini kullanmanız gereken durumlar:
Wireframe
Wireframe’ler, tasarım unsurları olmadan bir web sitesinin düzenini ve yapısını gösteren şemalardır. Wireframe’i, web sitesi tasarımınızın bir mimari planı olarak düşünebilirsiniz.
Bir wireframe, basit bir kalem-kağıt taslağı kadar sade olabilir. Bu yönüyle, tasarımcı olmayan ancak fikirlerini net biçimde ifade etmek isteyen kişiler için oldukça kullanışlıdır. Wireframe’ler, yeni ya da yoğun etkileşimli özellikler içeren web siteleri üzerinde çalışan tasarımcılar için de yol göstericidir. Bunun nedeni, wireframe’lerin tasarım detaylarına ve kod sürecine geçmeden önce sitenin temel yapısını ve işlevlerini netleştirmenizi sağlamasıdır.
Daha basit bir e-ticaret sitesi tasarlıyor olsanız bile, bir wireframe genel satış hunisini ve kurgulamak istediğiniz müşteri deneyimini netleştirmenize yardımcı olur. Wireframe’ler sade yapıları sayesinde, tasarım süreci başlamadan önce tüm paydaşların aynı vizyon üzerinde uzlaşmasını sağlar.
Mockup
Mockup’lar, marka kimliği unsurlarının uygulanmış olduğu hedeflenen web sitesi düzenini gösteren, yüksek detaylı ve statik görsel sunumlardır. Wireframe’lerin aksine mockup’lar; sanat yönetimi, tipografi ve renk paleti gibi görsel tasarım unsurlarını içerir.
Mockup’lar, son kullanıcıya web sitesinin nihai hâlinin nasıl görüneceğini gerçekçi biçimde gösterir; ancak henüz etkileşimli değildir. Özel tasarım bir web sitesi geliştirirken mockup’lar kritik öneme sahiptir; çünkü kodlama süreci başlamadan önce tasarım üzerinde revizyon yapmanıza imkân tanır.
Prototip
Prototipler, bir web sitesini önizlemek için en yüksek doğruluk seviyesine sahip seçenektir. Prototipler, kullanıcı deneyimini simüle etmek ve tasarımı gerçek kullanım senaryosuna yaklaştırmak için önizleme bağlantıları aracılığıyla çalışan etkileşimli modellerdir.
Geliştirme sürecine geçmeden önce farklı etkileşimli unsurların test edilmesi gereken projelerde prototip kullanımı oldukça avantajlıdır. Daha basit projelerde ise mockup aşamasından doğrudan geliştirme sürecine geçmek mümkün olabilir.
Web sitesi mockup’ı nasıl yapılır?
- Markayı nasıl konumlandıracağınızı karar verin
- Kullanıcı yolculuğunu doğrusal bir akış içinde kurgulayın
- Marka kimliği unsurlarını bir araya getirin
- Her sayfa türü için ayrı tasarım şablonları oluşturun
- İçeriği temsil eden anlamlı yer tutucular ekleyin
- Tasarım sürecinde geri bildirim toplayın
İster tasarımı kendiniz yapın ister bir tasarımcıyla çalışın, tasarım sürecinde dikkate alınması gereken temel unsurlar aynıdır.
1. Markayı nasıl konumlandıracağınıza karar verin
Bir web sitesi tasarlarken ilk adım, bir adım geri çekilip markayı nasıl konumlandıracağınızı düşünmektir. Bir tasarımcıyla çalışıyorsanız, süreci bir yaratıcı özet ile başlatabilirsiniz. Bu özet, tasarımcının markanızı, hedef kitlenizi ve ilham aldığınız referansları daha iyi anlamasını sağlar.
Belirli özelliklere odaklanmak istemeniz doğaldır; ancak teknik detaylara dalmadan önce büyük resmi görmeye çalışın: Web sitenizin yerleşim düzeni aracılığıyla anlatmak istediğiniz genel hikâyeyi netleştirin.
Örneğin, kullanıcıların ana sayfanızda daha fazla vakit geçirmesini sağlama hedefiyle işe başlayabilirsiniz. Ana sayfa, çoğu zaman bir markayla kurulan ilk temas noktasıdır. Aynı zamanda genellikle en yüksek hemen çıkma oranına sahip sayfadır. Ancak özellikler ya da dönüşüm optimizasyonu bakış açısıyla başlamak yerine şu soruyu sorun: “Ana sayfa ziyaretçileriyle daha derin bir bağ nasıl kurabiliriz?”
Çözüm, sayfanın manşetinde markanızı anlatan tek cümlelik bir giriş metni yazmak kadar basit olabilir. Marka değerleriniz işinizin merkezinde yer alıyorsa, bu değerleri doğrudan ana sayfada vurgulamak için ideal bir fırsattır. Örneğin sürdürülebilirlik ya da kapsayıcılık gibi değerleri öne çıkarmak, hedef kitlenizde karşılık bulabilir ve ziyaretçilerin sitenizde daha uzun süre kalmasını sağlayabilir.
2. Kullanıcı yolculuğunu doğrusal bir akış içinde kurgulayın
Web siteniz doğrusal bir anlatı izlemelidir; yani her bölüm ve sayfa bir sonrakine mantıklı biçimde bağlanmalı ve onu desteklemelidir. Başarılı bir anlatı, ziyaretçi ana sayfanıza geldiğinde markanız ve sunduğunuz ürünler hakkında net bir fikir edinmesini sağlar. Ziyaretçi site içinde ilerledikçe, kendisi için en uygun ürünleri bulmasına yardımcı olacak daha fazla bilgi ve özellik sunmalısınız.
Geleneksel bir e-ticaret sitesinde doğrusal anlatı, satış hunisi olarak kurgulanır: Kullanıcı ana sayfaya gelir ve burada markanızla tanışır. Ardından, ana sayfaya kıyasla daha detaylı bilgi sunan ürün koleksiyon sayfalarına geçerler; burada en önemli bilgiler ön planda yer alır, ikincil ve üçüncül bilgiler ise kolayca erişilebilir durumdadır. Başarılı bir anlatı akışında kullanıcı ürünleri seçer, sepet sayfasına ilerler ve nihayetinde ödeme sürecini tamamlar.
3. Marka kimliği unsurlarını bir araya getirin
Web sitesinin anlatısını nasıl kurgulamak istediğinize karar verdikten sonra, tasarımda kullanacağınız marka unsurlarını bir araya getirin.
Marka rehberiniz varsa bunu tasarımcınızla paylaşabilir (ya da kendiniz başvuru kaynağı olarak kullanabilirsiniz). Yoksa, mockup oluşturmadan önce tipografi, grafik unsurlar ve renk paleti gibi marka öğelerine karar vermelisiniz. Web sitesinin grid (ızgara) yapısı, marka fontlarınızın satır yüksekliği ve harf aralıklarına göre belirleneceği için, Mockup’ı oluşturmadan önce bu unsurları netleştirmeniz önemlidir. Izgara yapısını belirledikten sonra, tasarım varlıklarınız ve yaratıcı özetiniz doğrultusunda mockup'larınızı oluşturabilirsiniz.
4. Her sayfa türü için ayrı tasarım şablonları oluşturun
Bir web sitesi mockup’ı tasarlarken, her bir sayfa için ayrı ayrı mockup hazırlamazsınız. Bunun yerine, koleksiyon sayfası ve ürün sayfası gibi farklı sayfa türleri için mockup şablonları oluşturursunuz.
Her bir şablonu tasarlarken bir adım geri çekilin ve şu soruyu sorun: “Kullanıcı deneyimini en başarılı kılacak unsur nedir?” Örneğin, altı veya daha az üründen oluşan özenle seçilmiş bir koleksiyonunuz varsa, koleksiyon sayfanız her bir ürünü öne çıkarmalı ve detaylı ürün sayfalarına geçmeden önce gerekli bağlamı sunmalıdır.
Buna karşılık, düzinelerce, yüzlerce hatta binlerce üründen oluşan bir envanteriniz varsa, gelişmiş filtreleme özelliklerine sahip bir yapı tasarlamalısınız. Bu sayede koleksiyon sayfasına gelen ziyaretçiler, sonuçları kendileri için en uygun ürünlere kolayca daraltabilir.
5. İçeriği temsil eden anlamlı yer tutucular ekleyin
Mockup, web sitenizin nihai hâlinin bir önizlemesi olduğu için, mockup çalışması sürerken site için içerik üretmeye devam ediyor olabilirsiniz. Bu durumda, içeriği temsil eden anlamlı yer tutucular kullanabilirsiniz.
Mockup’ta kullanılan görseller ve metinler geçici olsa bile, mümkün olduğunca nihai hedefe yakın hazırlanmalıdır. Bu sayede mockup'ları incelediğinizde, sitenin gideceği yönü çok daha net bir şekilde kavrayabilirsiniz. Örneğin “lorem ipsum” gibi genel bir yer tutucu metin kullanmak yerine, markanızın diliyle uyumlu örnek içerikler hazırlayabilirsiniz.
6. Tasarım sürecinde geri bildirim toplayın
Mockup’ınız hazır olduğunda, paydaşlara sunarak geri bildirim alma aşamasına geçebilirsiniz. Web sitesi mockup'ı oluşturmanın en büyük avantajı, kod üzerinde değişiklik yapmadan revizyon gerçekleştirebilmenizdir. Bu nedenle mockup’ı geliştirme aşamasına geçmeden önce tüm paydaşların tasarımdan emin olduğundan bu aşamada emin olun.
Web sitesi mockup araçları
Web sitesi mockup'ı oluşturmak için kullanabileceğiniz pek çok tasarım aracı vardır; en popüler seçeneklerden bazıları şunlardır:
Sketch
Sketch, hızlı yineleme (iterasyon) imkânı sunan bir web tasarım uygulamasıdır. 2010 yılında özellikle arayüz (UI) tasarımı için geliştirilen Sketch, hem mockup hem de etkileşimli prototip oluşturmanıza olanak tanır. Standart abonelik planı aylık 12 dolardan başlar.
Figma
Figma, gerçek zamanlı iş birliği imkânı sunan bir tasarım aracıdır. Bir mockup üzerinde aynı anda birden fazla kişi çalışıyorsa, Figma iyi bir tercih olabilir. Figma’ya ücretsiz kaydolabilirsiniz; ancak tüm özelliklere erişmek için planlar aylık 15 dolardan başlar.
Adobe XD
Adobe tasarım paketinin tamamıyla (Photoshop, Illustrator, InDesign ve Lightroom gibi uygulamalar)
çalışan tasarımcılar, diğer Adobe uygulamalarıyla sunduğu sorunsuz entegrasyon sayesinde Adobe XD’yi tercih ediyor. Adobe artık XD’yi bağımsız bir ürün olarak sunmuyor; ancak aylık 59,99 dolar karşılığında Adobe Creative Cloud aboneliğiyle erişebilirsiniz.
Web sitesi mockup’ı nasıl yapılır?, SSS
Ücretsiz olarak bir web sitesi mockup’ı nasıl yapılır?
Bir web sitesi mockup’ı hazırlamak için genellikle ücretli bir tasarım aracına ihtiyaç duyarsınız. Neyse ki Figma gibi birçok tasarım aracı, başlangıç için kullanabileceğiniz ücretsiz deneme sürümü ya da sınırlı özelliklere sahip ücretsiz plan sunar. Canva da ücretsiz bir web sitesi mockup’ı oluşturmak için kullanabileceğiniz alternatif bir araçtır.
Web sitesi mockup’ı ne zaman oluşturulmalıdır?
Web sitesi mockup’ı, tamamen özel bir site geliştirirken oldukça faydalıdır; çünkü geliştirme aşamasına geçmeden önce sitenin nasıl görüneceği ve nasıl bir deneyim sunacağı hakkında net bir fikir verir. Tasarım sürecinde paylaşabileceğiniz, referans olarak kullanabileceğiniz ve üzerinde yineleme (iterasyon) yapabileceğiniz somut bir taslak sunar. Projeye bağlı olarak, wireframe taslağını oluşturduktan sonra mockup hazırlayabilir ya da proje gereksinimlerini netleştirdikten sonra wireframe aşamasını atlayarak doğrudan mockup’a geçebilirsiniz.
Web sitesi mockup’ı hazırlamak her zaman gerekli midir?
Projenin kapsamına bağlı olarak web sitesi mockup’ı hazırlamanız gerekmeyebilir. Örneğin sitenizi hazır bir Shopify temasıyla oluşturuyorsanız, mockup aşamasını atlayıp temayı doğrudan etkileşimli bir prototip gibi kullanabilirsiniz. Bununla birlikte, iyi bir mockup hazırlarken uygulanan tasarım prensiplerinin çoğu bu yaklaşım için de geçerlidir.
