Freelance Web Tasarımcı mı, Ajans mı? 2026'da Doğru Seçim
Freelance web tasarımcı mı, ajans mı? Bütçe, iletişim, süreklilik ve risk açısından iki modeli karşılaştırdık; hangi projede hangisinin mantıklı olduğunu somut ölçütlerle...
Devamını okuWeb tasarımında UI (User Interface, kullanıcı arayüzü) sitenin nasıl göründüğünü; UX (User Experience, kullanıcı deneyimi) ise sitenin nasıl kullanıldığını ve ziyaretçide nasıl bir his bıraktığını anlatır. Kısacası UI butonun rengi ve biçimidir, UX ise o butonun doğru yerde olup olmadığı ve kullanıcıyı gitmek istediği yere götürüp götürmediğidir. İyi bir web sitesinde ikisi ayrı ayrı değil, birlikte tasarlanır.
UI nedir? Arayüzün görünen yüzü
UI; renkler, tipografi, boşluklar, ikonlar, butonlar, form alanları ve bunların birbiriyle uyumudur. Ziyaretçi sayfayı açtığı ilk saniyede siteye "profesyonel" ya da "özensiz" etiketini yapıştırıyorsa, bu kararı büyük ölçüde arayüz verdirir.
İyi bir arayüzün ölçütü güzellikten çok tutarlılıktır. Aynı işi gören butonlar sitenin her yerinde aynı görünmeli, başlık boyutları bir düzene bağlı olmalı, bağlantılar düz metinden ayırt edilebilmeli. Kürekod olarak tasarımdan koda geçirdiğimiz işlerde en sık düzelttiğimiz şey, her sayfada biraz farklı çizilmiş butonlar ve rastgele seçilmiş boşluklar oldu.
Arayüzde dikkat edilen temel öğeler
- Tipografi: En fazla iki yazı tipi, okunaklı bir gövde metni ve net bir başlık hiyerarşisi.
- Renk: Bir ana renk, bir vurgu rengi ve nötr tonlar. Vurgu rengi yalnız önemli eylemlerde kullanılmalı ki anlamını korusun.
- Boşluk: Öğeler arasında nefes alanı. Sıkışık bir sayfa, içerik ne kadar iyi olursa olsun yorucu görünür.
- Bileşenler: Buton, form, kart ve menü gibi parçaların bir kez tasarlanıp her yerde aynı biçimde kullanılması.
UX nedir? Deneyimin görünmeyen kurgusu
UX, ziyaretçinin siteye girdiği andan amacına ulaştığı ana kadar yaşadığı her şeyi kapsar. Aradığını bulabiliyor mu, formu doldururken takılıyor mu, sayfa geç açıldığı için vazgeçiyor mu? Kullanıcı deneyimi iyi olduğunda fark edilmez; kötü olduğunda ise herkes fark eder.
Bu konunun işletmeye doğrudan etkisini merak ediyorsanız, Digital Küre'nin web tasarımında kullanıcı deneyiminin önemi üzerine yazdığı yazı, konuyu satış ve güven tarafından ele alıyor.
Kullanıcı akışı: UX'in omurgası
Kullanıcı akışı, ziyaretçinin bir hedefe ulaşmak için izlediği adımların sırasıdır. Bir diş kliniği sitesini düşünün: ana sayfa, tedavi sayfası, randevu formu, onay mesajı. UX çalışması bu akıştaki her adımı sorgular. Tedavi sayfasından randevuya geçmek için kaç tıklama gerekiyor? Form telefonda rahat dolduruluyor mu? Onay mesajı bundan sonra ne olacağını açıkça söylüyor mu?
Akışı kâğıt üzerinde çizmek bile çoğu sorunu ortaya çıkarır. İletişim sayfasına ulaşmak için menüde üç katman inmek gerektiğini ya da formun gönderildikten sonra ziyaretçiyi boş bir sayfada bıraktığını, çoğu zaman ancak bu basit çizimle fark ederiz.
UI ve UX arasındaki fark: bir sepet sayfası örneği
Farkı somutlaştırmak için bir e-ticaret sitesinin sepet sayfasına iki farklı gözle bakalım:
| Konu | UI sorusu | UX sorusu |
|---|---|---|
| Satın al butonu | Rengi, boyutu, köşe yuvarlaklığı ne olmalı? | Buton gözün gittiği yerde mi, telefonda başparmakla rahat ulaşılıyor mu? |
| Kargo bilgisi | Hangi ikon ve yazı boyutuyla gösterilmeli? | Kargo ücreti sepette mi öğreniliyor, yoksa son adımda sürpriz mi oluyor? |
| Form alanları | Alanlar nasıl hizalanmalı, hata mesajı hangi renkte olmalı? | Kaç alan gerçekten gerekli, üye olmadan alışveriş yapılabiliyor mu? |
UI "nasıl görünüyor", UX ise "işe yarıyor mu" sorusuna cevap arar. Çok şık görünen ama kargo ücretini ödeme adımında ortaya çıkaran bir sepet sayfası, iyi bir arayüzle kötü bir deneyimin bir arada olabileceğinin klasik örneğidir.
UI ve UX birlikte nasıl çalışır?
Büyük ekiplerde UI ve UX farklı kişilerin işi olabilir; freelance ve küçük ekip projelerinde ise genellikle aynı kişi ya da aynı birkaç kişi üstlenir. Hangisi olursa olsun sağlıklı sıra aynıdır: önce akış ve içerik planı, sonra görsel dil, ardından ikisinin birlikte gerçek cihazlarda test edilmesi.
Sıra tersine döndüğünde, yani önce "güzel bir ana sayfa" çizilip içerik sonradan yerleştirilmeye çalışıldığında, metinler kutulara sığmaz, butonlar anlamsız yerlerde kalır. Bu iki alanın sitenin diğer parçalarıyla ilişkisini görmek isterseniz, Digital Küre'nin web tasarımın sekiz temel bileşenini anlattığı yazı iyi bir çerçeve sunuyor.
Sadelik: iki disiplinin buluştuğu yer
UI ve UX'in en kolay anlaştığı konu sadeliktir. Her sayfanın tek bir ana amacı olmalı; o amaca hizmet etmeyen öğeler ya çıkarılmalı ya da geri plana alınmalı. Sade bir sayfa hem daha şık görünür hem de daha kolay kullanılır.
Sadelik boş sayfa demek değil. Bir hizmet sayfasında hizmetin ne olduğu, kime uygun olduğu, nasıl işlediği, sık sorulan sorular ve iletişim çağrısı rahatlıkla yer alabilir. Önemli olan bu içeriklerin, ziyaretçinin aklına gelecek soruların sırasıyla dizilmesi.
Mikro etkileşimler ve geri bildirim
Butona basıldığında kısa bir yükleniyor göstergesi, hatalı girilen telefon numarasının hemen altında beliren açıklama, sepete eklenen ürünün küçük bir onayla bildirilmesi... Bu ayrıntılar hem arayüzün hem de deneyimin parçasıdır. Ziyaretçiye "işleminiz alındı" demeyen bir site, aynı butona üç kez bastırır.
Mobilde UI ve UX
Telefonda ekran küçük, parmak ise fare imlecinden çok daha kalındır. Masaüstünde yan yana duran üç buton mobilde alt alta dizilmeli, menü tek elle açılabilmeli, önemli eylem ekranın alt yarısında, başparmağın rahat ulaştığı bölgede durmalı. Masaüstü tasarımı küçültüp telefona sığdırmak arayüzü korusa bile deneyimi bozar; bu yüzden mobil görünüm, masaüstünün bir yan ürünü değil, ayrı bir tasarım kararı olarak ele alınmalı.
Küçük bir sitede UI/UX için pratik kontroller
Büyük bütçeli kullanıcı testleri her proje için gerekli değil. Şu kontroller, kurumsal ve tanıtım sitelerinin çoğunda işin büyük kısmını çözer:
- Sitenizi hiç görmemiş birine telefonu verin ve "şu hizmet için teklif iste" deyin. Nerede takıldığını izleyin, araya girmeyin.
- Her sayfa için "Bu sayfadan sonra ziyaretçi ne yapmalı?" sorusuna tek cümlelik bir cevap yazın. Cevap yoksa sayfa amaçsızdır.
- Formları telefonda bizzat doldurun. Telefon alanında rakam klavyesi, e-posta alanında @ işaretli klavye açılıyor mu?
- Sayfanın ekran görüntüsünü gri tonlamada inceleyin. Ana eylem butonu renk olmadan da öne çıkıyor mu?
- Gövde metnini telefonda, ekran parlaklığı düşükken rahatça okuyabiliyor musunuz?
İyi tasarım fark edilmez, kötüsü hemen hissedilir
Ziyaretçi bir sitede UI ya da UX kelimelerini düşünmez; yalnız işini kolay mı zor mu hallettiğini hatırlar. Bu yüzden tasarım kararlarını "Beğendim mi?" sorusu yerine "Ziyaretçi amacına daha hızlı ulaşıyor mu?" sorusuyla vermek gerekir.
Hazır bir tasarımı koda dökerken bu dengeyi nasıl koruduğumuzu tasarımdan koda (PSD, Figma to HTML) hizmet sayfamızda, kurumsal sitelerde nelere dikkat ettiğimizi ise kurumsal web tasarımında dikkat edilmesi gereken 9 nokta yazımızda bulabilirsiniz.