Rehber

Tasarım Nedir? Dijital Tasarım Rehberi: Web, UI/UX

Tasarım nedir, dijital dünyada hangi biçimleri alır ve iyi bir web sitesi, arayüz ya da sosyal medya görseli nasıl hazırlanır? İlkelerden sürece, hızdan dönüşüme kadar uygulamaya dönük bir rehber.

Şablon görünümlü değil, markanıza ait ve ölçülebilir biçimde çalışan arayüzler üretme kararlılığıyla, Türkiye'nin en iddialı tasarım ve yazılım ekiplerinden biri olmayı hedefliyoruz.

Hafta içi 09:00–18:00 2018'den beri Bursa merkezli, Türkiye geneli Güncelleme: 0539 748 53 22
Kısa cevap

Tasarım, bir ürünün, iletişimin ya da deneyimin hem nasıl göründüğünü hem de nasıl çalıştığını belirli bir amaca göre planlama işidir. Dijital tasarım bu işi web siteleri, uygulama arayüzleri ve sosyal medya için yapar. İyi tasarım sonucu; net bir hiyerarşi, okunaklı tipografi, erişilebilir renkler, mobil öncelikli düzen, hızlı açılan sayfalar ve ziyaretçiyi tek bir sonraki adıma yönlendiren kurguyla gelir.

Bu sayfada
  1. Rehberin özeti
  2. Tasarım nedir?
  3. Tasarım türleri nelerdir?
  4. Dijital tasarım hangi alanları kapsar?
  5. UI ile UX arasındaki fark nedir?
  6. İyi tasarımın ilkeleri nelerdir?
  7. Tasarım dönüşümü nasıl etkiler?
  8. Görsel kararlar hızı ve SEO'yu nasıl etkiler?
  9. Web sitesi tasarım süreci nasıl işler?
  10. Tasarım sistemi nedir, neden gerekir?
  11. Mobil öncelikli yaklaşım nasıl uygulanır?
  12. 2026 eğilimlerine eleştirel bakış: hangisi kalıcı?
  13. Bütçeyi ve süreyi ne belirler?
  14. Tasarım terimleri sözlüğü
  15. Sık yapılan hatalar ve nasıl önlenir?
  16. En iyi tasarım ekibi nasıl seçilir?
  17. Sıkça sorulan sorular
Kısa bir görüşme yapalım Kapsamı birlikte netleştirip size özel teklif hazırlayalım. Teklif alın

Rehberin özeti

  • Tasarım yalnızca görünüş değildir; bir şeyin nasıl çalıştığını, nasıl anlaşıldığını ve kullanıcıyı hangi eyleme yönelttiğini de kapsar.

  • Bu rehber geniş tasarım dünyasının dijital tarafına odaklanır: web sitesi, arayüz (UI), kullanıcı deneyimi (UX), sosyal medya ve kurumsal kimliğin ekrana uyarlanması.

  • İyi bir arayüzün ilkeleri hiyerarşi, tipografi, renk, boşluk, erişilebilirlik ve amaçlı harekettir; hepsi ziyaretçinin işini kolaylaştırmak için vardır.

  • Görsel kararlar site hızını ve Core Web Vitals göstergelerini doğrudan etkiler; ağır bir ilk ekran hem SEO'ya hem dönüşüme zarar verir.

  • Kalıcı sonuç; keşif, taslak, prototip, test ve ölçümden oluşan bir süreçle ve bir tasarım sistemiyle gelir, tek seferlik "güzel ekranlarla" değil.

Tasarım nedir?

Tasarım, bir ürünün, mekânın, iletişimin ya da deneyimin hem nasıl göründüğünü hem de nasıl çalıştığını belirli bir amaca ve kullanıcıya göre planlama işidir. Bu tanımdaki kilit kelime "amaç"tır: Sanat kendini ifade etmeye odaklanırken, bu disiplin bir sorunu çözmeye odaklanır. Güzel görünen ama kullanıcının işini zorlaştıran bir tasarım, estetik açıdan başarılı olsa bile işlevsel açıdan başarısızdır.

Terim çok geniş bir alanı kapsar. Tasarım her yerdedir: Bir koltuğun formu, bir binanın planı, bir kitap kapağı, bir uygulamanın ödeme adımı ve bir mağazanın raf düzeni aynı kelimeyle anılır. Bu yüzden bu rehber önce alanın genel haritasını kısaca çiziyor, ardından kapsamı bilinçli olarak dijital tasarıma, yani ekranlarda yaşayan işlere daraltıyor.

Konuyu 5N1K ile düşünmek

  • Ne: Bir web sitesi mi, bir uygulama arayüzü mü, bir sosyal medya şablon seti mi?
  • Neden: Güven vermek mi, satış ya da teklif almak mı, bir işi hızlandırmak mı?
  • Kim: Ekranı kim kullanacak, kararları kim verecek, işi kim üretecek?
  • Nerede: Mobil tarayıcıda mı, masaüstünde mi, Instagram akışında mı, bir yönetim panelinde mi?
  • Ne zaman: Yeni bir marka mı kuruluyor, eski bir site mi yenileniyor, bir kampanya mı açılıyor?
  • Nasıl: Hangi tasarım süreci, hangi araçlar, hangi ölçüm ve hangi bütçeyle?

Bu soruların cevabı netleşmeden çizilen her ekran, bir tahmindir. Cevaplar netleştiğinde ise renk, yazı tipi ve yerleşim gibi tasarım kararları kişisel zevkten çıkar, gerekçesi olan seçimlere dönüşür.

2018yılından beri tasarım ve yazılım
4aşamataslak, arayüz, geliştirme, yayın
6altyapıe-ticaret platformu deneyimi
5kişiaynı masada çalışan çekirdek ekip
1iş günüiçinde talebinize dönüş

Tasarım türleri nelerdir?

Başlıca tasarım türleri grafik, endüstriyel (ürün), iç mimari, mimari, moda, hizmet ve dijital alanlardır. Tasarım türlerinin hepsi aynı düşünme biçimini paylaşır: kullanıcıyı anlamak, seçenek üretmek, denemek ve iyileştirmek. Farkları, ortaya çıkan işin malzemesinde ve kullanıldığı ortamdadır.

  • Grafik: Logo, ambalaj, afiş, broşür ve yayın gibi görsel iletişim işleri. Kurumsal kimlik çoğu zaman buradan doğar.
  • Endüstriyel (ürün): Mobilya, cihaz, makine ve gündelik nesnelerin formu, ergonomisi ve üretilebilirliği.
  • İç mimari ve mimari: Mekânın planı, akışı, malzemesi ve ışığı.
  • Moda ve tekstil: Giysi, kumaş deseni ve aksesuar.
  • Hizmet: Bir müşterinin bir kurumla yaşadığı yolculuğun baştan sona kurgulanması; randevudan faturaya kadar.
  • Dijital: Web siteleri, mobil ve web uygulamaları, yönetim panelleri, sosyal medya içerikleri ve ekran için hazırlanan her türlü görsel iletişim.

Bu sınırlar giderek iç içe geçiyor. Tasarım alanları iç içe geçebilir: Bir mobilya üreticisinin ürün formu, kataloğu, web sitesi ve bayi portalı aynı marka dilini konuşmak zorunda. Bu rehberin geri kalanında son maddeye, yani ekranlar için yapılan tasarım işine odaklanıyoruz.

Dijital tasarım hangi alanları kapsar?

Dijital tasarım; web sitesi, kullanıcı arayüzü (UI), kullanıcı deneyimi (UX), sosyal medya görselleri ve kurumsal kimliğin ekrana uyarlanması gibi alanları kapsar. Dijital tasarım alanlarının ortak noktaları, işin bir ekranda yaşaması, etkileşimli olması ve sonucunun ölçülebilmesidir.

Web sitesi

Bir web sitesinin görsel ve yapısal kurgusu; hangi sayfaların olacağı, menünün nasıl çalışacağı, her sayfada ziyaretçiye neyin hangi sırayla anlatılacağı ve sitenin her ekran boyutunda nasıl davranacağıdır. Kurumsal bir sitede amaç çoğu zaman güven vermek ve teklif talebi almaktır. Bu alandaki çalışma biçimimizi kurumsal web tasarım hizmet sayfamızda ayrıntılı anlatıyoruz.

Arayüz (UI)

Kullanıcının gördüğü ve dokunduğu katmandır: butonlar, formlar, kartlar, ikonlar, menüler, renkler ve yazı tipleri. İyi bir arayüz, tasarım açısından tutarlıdır; aynı iş her ekranda aynı görünür ve aynı davranır.

Kullanıcı deneyimi (UX)

Kullanıcının bir işi yapmaya çalışırken yaşadığı tasarım sürecinin tamamıdır. Bilgi mimarisi, kullanıcı akışları, içerik önceliği, hata durumları ve bekleme süreleri bu alana girer. UX tasarım işi çoğu zaman ekran çizilmeden önce başlar: araştırma, görüşme, akış şeması ve taslak (wireframe) ile.

Sosyal medya

Gönderi, carousel, hikâye ve kısa video kapağı gibi içeriklerin görsel dilidir. Burada en önemli şey tutarlılıktır: hazır tasarım şablonları, sabit renk ve yazı kuralları, her platformun ölçülerine uygun formatlar (ör. akış için 4:5, hikâye ve Reels için 9:16) ve düzenli bir içerik takvimi. Bu işi sosyal medya yönetimi hizmetimiz kapsamında, web sitesiyle aynı görsel dili kullanarak yürütüyoruz.

Kurumsal kimliğin dijitale uyarlanması

Basılı iş için hazırlanmış bir kurumsal kimlik, tasarım açısından ekranda her zaman aynı başarıyı göstermez. Tasarımda logonun yatay, dikey ve yalnızca simgeden oluşan versiyonları; favicon ve uygulama ikonu için sadeleştirilmiş hali; renklerin ekran karşılıkları (HEX ve RGB) ve bu renklerin metin üzerinde yeterli kontrast verip vermediği; web için lisanslı yazı tipleri ve karanlık mod uyumu, dijital kimlik setinin parçalarıdır.

E-ticaret arayüzleri

E-ticaret tasarım işinde ürün listeleme, filtre, ürün detayı, sepet ve ödeme adımları kendine özgü kurallar ister. Tasarımda ürün görselinin büyüklüğü, varyant seçiminin netliği, kargo ve iade bilgisinin görünürlüğü ve ödeme adımının sadeliği doğrudan satışa etki eder. Bu tarafı e ticaret sitesi yaptırma sayfamızda ele alıyoruz.

Yönetim paneli ve uygulama arayüzleri

Bir stok paneli, sipariş ekranı ya da randevu uygulaması her gün saatlerce kullanılır; tasarım da buna göre yapılır. Burada etkileyici görünüm değil, hız ve hata önleme öne çıkar: yoğun tablolar için okunaklı satırlar, klavye kısayolları, toplu işlem seçenekleri, geri alınabilir eylemler ve boş, yükleniyor ya da hata durumları için net mesajlar. İç kullanım ekranlarında yapılan küçük bir tasarım iyileştirmesi, ekibin her gün kazandığı zamana dönüşür.

Temsili Sosyal medya tasarımında tutarlılık, şablonlara ve haftalık bir içerik takvimine dayanır.

UI ile UX arasındaki fark nedir?

İki kavram sık karıştırılır. Kısaca: UX işin nasıl çalıştığıyla, UI nasıl göründüğü ve hissettirdiğiyle ilgilenir. İyi bir ürün ikisini birlikte ister.

ÖlçütUX (kullanıcı deneyimi)UI (kullanıcı arayüzü)
Temel soruKullanıcı işini kolayca bitirebiliyor mu?Ekran anlaşılır, tutarlı ve markaya uygun mu?
ÇıktılarAraştırma notları, kullanıcı akışları, bilgi mimarisi, taslaklarRenk ve yazı sistemi, bileşenler, ekran tasarımları, prototip
Ne zaman başlarEkran çizilmeden önceAkış ve içerik netleştikten sonra
Nasıl ölçülürGörev tamamlama, hata, terk ve dönüşüm oranlarıTutarlılık, okunabilirlik, erişilebilirlik kontrolleri
Sık hataKullanıcıyla hiç konuşmadan varsayımla ilerlemekGerekçesiz süsleme ve ekrandan ekrana değişen bileşenler

Küçük tasarım projelerinde iki rolü aynı kişi üstlenebilir; önemli olan iki sorunun da sorulmasıdır.

İyi tasarımın ilkeleri nelerdir?

İyi tasarımın ilkeleri hiyerarşi, tipografi, renk, boşluk, erişilebilirlik ve amaçlı harekettir. Bu tasarım ilkelerinin hepsi aynı hedefe hizmet eder: Ziyaretçinin neye bakacağını, ne okuyacağını ve ne yapacağını düşünmeden anlamasını sağlamak.

Görsel hiyerarşi

İyi bir tasarım için her ekranda bir şey en önemlidir ve bu, boyut, kontrast, renk ve konumla açıkça belli olmalıdır. Başlık, alt başlık, metin ve ana eylem butonu arasında net bir sıralama olmayan sayfada göz nereye bakacağını bilemez. Basit bir tasarım testi: Ekrana bir saniye bakıp gözlerinizi kapatın; aklınızda kalan şey, ekranın en önemli mesajı değilse hiyerarşi bozuktur.

Tipografi

Ekrandaki içeriğin büyük kısmı metindir; bu yüzden yazı tipi seçimi ve ölçeği, arayüzün temelini oluşturur. Sınırlı sayıda yazı ailesi, tutarlı bir boyut ölçeği, mobilde rahat okunacak gövde boyutu ve çok uzun olmayan satırlar okunabilirliği artırır. Tasarım tarafında web fontlarının dosya boyutu da önemlidir; gereksiz ağırlık ve karakter setleri sayfayı yavaşlatır.

Renk ve kontrast

Renk önce işlev, sonra duygu taşır. Ana eylem rengi, uyarı, hata ve başarı durumları tutarlı olmalıdır. Uluslararası erişilebilirlik standardı WCAG, AA düzeyinde normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast oranını başarı ölçütü olarak tanımlar. Bilgi yalnızca renkle verilmemeli; hata mesajı bir ikon ve metinle de desteklenmelidir.

Boşluk ve ızgara

Boşluk, öğeleri gruplayan ve ayıran görünmez bir dildir. Birbirine yakın duran öğeler birbiriyle ilişkili algılanır. Tasarım sisteminde tutarlı bir boşluk ölçeği ve ızgara düzeni, ekranları hem daha düzenli gösterir hem de geliştirme sırasında tahmin yerine kural kullanılmasını sağlar.

Erişilebilirlik

Erişilebilir bir arayüz; görme, işitme, hareket ya da bilişsel farklılıkları olan kişiler dahil herkesin kullanabildiği arayüzdür. Görsellerde açıklayıcı alternatif metin, klavyeyle gezinilebilen menüler, görünür odak çerçevesi, etiketli form alanları ve yeterli dokunma alanı bunun temelidir. Erişilebilir tasarım iyileştirmeleri çoğu zaman herkes için kullanılabilirliği de artırır.

Hareket

Tasarım dilinde animasyon, bir değişikliği anlatmak için vardır: bir menünün açıldığını, bir öğenin sepete eklendiğini, bir sayfanın yüklendiğini göstermek gibi. Amaçsız, uzun ya da sürekli tekrarlayan hareket dikkati dağıtır ve bazı kullanıcılarda rahatsızlık yaratabilir. İşletim sisteminde "hareketi azalt" tercihini seçen kullanıcılara animasyonları sadeleştirmek, iyi uygulamanın parçasıdır.

Tasarım dönüşümü nasıl etkiler?

Tasarım dönüşümü, ziyaretçinin güvenini, sayfayı anlama hızını ve bir sonraki adımı atma kolaylığını belirleyerek etkiler. Aynı ürün ve aynı fiyatla, iyi tasarım ile kurgulanmış bir sayfa daha fazla teklif talebi ya da sipariş alır; çünkü ziyaretçiyi yoran engeller ortadan kalkmıştır.

İlk ekran

Ziyaretçi sayfayı açtığı anda üç soruya cevap arar: Burası ne? Bana ne faydası var? Şimdi ne yapmalıyım? İlk ekranda bu üç sorunun cevabı, açık bir başlık, tek cümlelik bir fayda ve tek bir ana eylem butonuyla verilmelidir. Dönen slaytlar ve büyük, anlamsız görseller bu alanı çoğu zaman boşa harcar.

Tek ana eylem

Her sayfanın tasarım açısından bir ana hedefi olmalıdır: teklif formu, telefon, WhatsApp ya da sepete ekleme. Seçenek sayısı arttıkça karar vermek zorlaşır. İkincil eylemler var olabilir ama görsel olarak geri planda durmalıdır.

Güven sinyalleri

Gerçek ekip fotoğrafları, adres ve çalışma saatleri, açık iade ve teslim koşulları, güvenli ödeme bilgisi ve gerçek müşteri yorumları güven verir. Stok fotoğraflar, belirsiz vaatler ve doğrulanamayan rakamlar ise tersini yapar.

Formlar

Her ek alan, formu dolduranların bir kısmını kaybettirir. Yalnızca gerçekten gereken bilgileri isteyin, alan etiketlerini görünür tutun, hata mesajlarını alanın hemen yanında ve anlaşılır biçimde gösterin, mobilde doğru klavye tipini (telefon, e-posta) açın.

Ölçerek iyileştirmek

Hangi başlığın, buton metninin ya da sayfa tasarım düzeninin daha iyi çalıştığını önceden kesin olarak bilemezsiniz. Analiz aracındaki dönüşüm verisi, ısı haritaları, oturum kayıtları ve kontrollü A/B testleri, tartışmayı görüşten veriye taşır. Tek seferde tek bir değişkeni değiştirmek ve yeterli veri birikmeden tasarım kararı vermemek, yanıltıcı sonuçların önüne geçer.

Sitenizin hangi noktada ziyaretçi kaybettiğini merak ediyorsanız, ücretsiz ön analiz kapsamında birlikte bakabiliriz.

Temsili Görünürlükten müşteriye uzanan hunide her katman, iyi bir tasarım kararıyla genişler ya da kötü bir kararla daralır.

Görsel kararlar hızı ve SEO'yu nasıl etkiler?

Tasarım kararları; sayfanın ne kadar hızlı açıldığını, ne kadar çabuk tepki verdiğini ve yüklenirken kayıp kaymadığını doğrudan belirler. Google bu üç deneyimi Core Web Vitals göstergeleriyle ölçer ve sayfa deneyiminin bir parçası olarak değerlendirir.

Core Web Vitals eşikleri

  • LCP (Largest Contentful Paint): İlk ekrandaki en büyük öğenin görünme süresi. Google'ın belgelerine göre 2,5 saniye ve altı "iyi" kabul edilir.
  • INP (Interaction to Next Paint): Kullanıcı etkileşimine sayfanın görsel tepki verme süresi. 200 milisaniye ve altı "iyi" kabul edilir.
  • CLS (Cumulative Layout Shift): Yükleme sırasında öğelerin beklenmedik kayma miktarı. 0,1 ve altı "iyi" kabul edilir.

Hangi görsel karar hangi göstergeyi bozar?

Tasarım kararıyla ilk ekrana konan büyük bir video ya da sıkıştırılmamış bir görsel LCP'yi uzatır. Boyutu belirtilmemiş görseller, geç yüklenen yazı tipleri ve sonradan beliren bannerlar CLS'yi artırır. Kaydırmaya bağlı ağır animasyonlar, çok sayıda üçüncü taraf betiği ve karmaşık menüler INP'yi kötüleştirir. Bu yüzden görsel tasarım kararları, ekranlar çizilirken performans bütçesiyle birlikte verilmelidir.

Görselleri hafif tutmanın yolları

Fotoğraflar WebP ya da AVIF gibi modern biçimlerde, ekranda gösterilecek boyuta yakın ölçülerde sunulmalıdır. İlk ekranın dışında kalan görseller ihtiyaç anında yüklenmeli, ilk ekrandaki ana görsel ise öncelikli yüklenmelidir. Her görsele genişlik ve yükseklik bilgisi vermek, yükleme sırasında sayfanın kaymasını önler. Tasarım dosyalarında ikonlar için tek renkli SVG kullanımı, büyük görsel dosyalarından çok daha hafiftir.

Arama motorları açısından yapı

Arayüz, arama motorlarının içeriği anlamasını da etkiler. Anlamlı başlık sırası (tek H1, mantıklı H2 ve H3), metin olarak yazılmış başlıklar (görselin içine gömülmüş metin yerine), açıklayıcı bağlantı metinleri ve temiz bir menü yapısı, hem kullanıcıya hem tarayıcılara yol gösterir. Teknik tarafı teknik SEO hizmetimiz kapsamında, INP'yi ise INP rehberimizde ayrıntılı anlatıyoruz.

Temsili LCP, INP ve CLS eşikleri: ağır bir ilk ekran tasarımı, en çok LCP ve CLS göstergelerini zorlar.

Web sitesi tasarım süreci nasıl işler?

Bir web sitesinin tasarım süreci; keşif, bilgi mimarisi ve taslak, görsel arayüz ve prototip, test, geliştirme ve yayından sonra ölçüm adımlarından oluşur. Proje büyüklüğü değişse de sıra aynıdır.

  1. Keşif ve hedef

    Sitenin iş hedefi, hedef kitle, rakip siteler, mevcut sitenin verileri ve ölçülecek dönüşümler yazılı hale getirilir. Çıktı: kapsam ve başarı ölçütleri.

  2. Bilgi mimarisi ve taslak

    Sayfa listesi, menü yapısı ve URL düzeni belirlenir; ana şablonların iskeleti renk ve görsel olmadan çizilir. İçeriğin sırası bu aşamada onaylanır.

  3. Görsel arayüz ve prototip

    Kurumsal kimliğe uygun renk, yazı ve bileşen sistemi kurulur; masaüstü ve mobil ekranlar hazırlanır, tıklanabilir bir prototipte birlikte gözden geçirilir.

  4. Kullanılabilirlik ve erişilebilirlik testi

    Prototip birkaç gerçek kullanıcıyla ya da ekip dışından kişilerle denenir; kontrast, okunabilirlik, form akışı ve mobil kullanım kontrol edilir.

  5. Geliştirme ve içerik girişi

    Ekranlar koda dönüşür, yönetim paneli kurulur, içerikler girilir; hız ve Core Web Vitals hedefleri farklı cihazlarda ölçülür.

  6. Yayın ve ölçüm

    Site yayına alınır, analiz ve dönüşüm takibi doğrulanır. İlk haftaların verisine göre başlık, buton, form ve sayfa sırası iyileştirilir.

Temsili Taslaktan arayüze, geliştirmeden yayına: tasarım süreci her aşamada farklı cihazlarda sınanarak ilerler.

Tasarım sistemi nedir, neden gerekir?

Tasarım sistemi, bir markanın dijital ürünlerinde kullanılan renk, yazı, boşluk, ikon ve bileşen kurallarının; bunların koddaki karşılıklarıyla birlikte tek bir yerde toplanmış halidir. Tasarım sisteminin amacı, her yeni ekranı sıfırdan çizmek yerine kanıtlanmış parçalarla hızlı ve tutarlı biçimde kurmaktır.

Bir sistemin parçaları

  • Temel değerler (token): Renkler, yazı boyutları, satır aralıkları, boşluk ölçeği, köşe yuvarlaklıkları ve gölgeler; hepsi isimlendirilmiş değişkenler olarak.
  • Bileşenler: Buton, form alanı, kart, sekme, tablo, bildirim ve menü gibi tekrar kullanılan parçalar; her biri farklı durumlarıyla (normal, üzerine gelme, odak, devre dışı, hata).
  • Kalıplar: Giriş formu, ürün listesi, filtre ya da ödeme adımı gibi bileşenlerden oluşan hazır düzenler.
  • Kullanım kuralları: Hangi bileşenin ne zaman kullanılacağı, metin tonu ve erişilebilirlik gereklilikleri.

Kimin ihtiyacı var?

Tek sayfalık bir tanıtım sitesi için ayrıntılı bir tasarım sistemi gerekmez; temel renk ve yazı kuralları yeterlidir. Ancak birden fazla site, bir yönetim paneli, bir mobil uygulama ve sosyal medya içeriği aynı markayı taşıyorsa, sistem olmadan her ekran biraz farklılaşır ve marka dağılır. Tasarım dosyasındaki adlar ile koddaki adların aynı olması, geliştirme hızını ve hatasız aktarımı belirgin biçimde iyileştirir. Yönetim panelleri ve özel arayüzler gerektiren projeleri özel yazılım geliştirme hizmetimizle aynı sistem üzerinde kuruyoruz.

Temsili Arayüz katmanı, API ve veri katmanının üzerinde durur; tasarım sistemi bu katmanın her ekranda aynı dili konuşmasını sağlar.

Mobil öncelikli yaklaşım nasıl uygulanır?

Mobil öncelikli tasarım, ekranları önce telefon için kurgulayıp sonra daha büyük ekranlara genişletmek demektir. Bu yaklaşım hem kullanıcı davranışına hem de Google'ın siteleri öncelikle mobil sürümleriyle değerlendirmesine uygundur.

İçerik önceliği

Küçük ekran, neyin gerçekten önemli olduğuna karar vermeye zorlar. Mobil tasarım açısından, masaüstünde yan yana duran beş blok telefonda alt alta dizildiğinde, sıralama mesajın kendisi olur. Önce en önemli bilgi ve ana eylem, sonra destekleyici içerik gelmelidir.

Başparmak ve dokunma alanları

Telefon çoğu zaman tek elle kullanılır. Sık kullanılan eylemler ekranın alt ve orta bölümüne, parmakla rahatça dokunulabilecek büyüklükte ve birbirinden yeterince ayrık konmalıdır. Mobil tasarım açısından küçük ve birbirine yapışık bağlantılar hem kullanıcıyı yorar hem de yanlış dokunmalara yol açar.

Gerçek cihazda test

Mobil tasarım testi için tarayıcının geliştirici araçlarındaki mobil görünüm iyi bir başlangıçtır ama yeterli değildir. Farklı ekran boyutlarına sahip birkaç gerçek telefonda, yavaş bir mobil bağlantıyla ve tek elle yapılan bir deneme; küçük kalan butonları, klavyenin örttüğü form alanlarını ve geç yüklenen öğeleri hızla ortaya çıkarır.

Menü, form ve performans

Mobil menü kısa ve öngörülebilir olmalı; telefon ve WhatsApp gibi eylemler tek dokunuşla erişilebilir olmalıdır. Formlar doğru klavye tipini açmalı, otomatik doldurmayı desteklemelidir. Mobil bağlantılar masaüstüne göre daha değişken olduğundan görsel boyutları, yazı tipi dosyaları ve betikler mobilde ayrıca ölçülmelidir.

2026 eğilimlerine eleştirel bakış: hangisi kalıcı?

2026'da tasarım eğilimlerinin en büyük riski, yapay zekâ araçlarının ürettiği ortalama görünümün her sitede tekrar etmesidir. Bir eğilimi benimsemeden önce sorulacak soru şudur: Bu, kullanıcının işini kolaylaştırıyor mu, yoksa yalnızca güncel mi görünüyor?

Yapay zekâ tasarım şablonu estetiğinden kaçınmak

Mor-mavi degradeler, her kartta cam efekti, parlayan kenarlıklar, kutu kutu dizilmiş "bento" düzenleri, anlamsız soyut üç boyutlu nesneler, emoji ikonlar ve "Geleceği birlikte inşa ediyoruz" gibi içi boş başlıklar artık bir sitenin hızlıca üretildiğinin işareti olarak okunuyor. Bu öğelerin hiçbiri tek başına kötü değil; sorun, markadan bağımsız ve gerekçesiz kullanılmaları. Yapay zekâ araçları taslak ve fikir üretmede gerçekten hız kazandırır, ama son kararı marka, içerik ve kullanıcı verisi vermelidir.

Kalıcı görünenler

  • Güçlü tipografi: Büyük, karakterli başlıklar ve iyi kurulmuş bir yazı ölçeği, görsel kalabalık olmadan kimlik oluşturur. Değişken yazı tipleri tasarım tarafında tek dosyayla birden fazla ağırlık sunarak performansa da yardım eder.
  • Karanlık mod desteği: Tasarımda kullanıcı tercihini izleyen ve kontrastı her iki modda da koruyan arayüzler artık bir beklenti.
  • Amaçlı mikro etkileşimler: Tasarımda sepete ekleme, form doğrulama ve sayfa geçişlerinde durumu anlatan kısa hareketler.
  • Gerçek fotoğraf ve gerçek içerik: Stok görsellerin yerine ekibin, ürünün ve tasarım sürecinin kendisini gösteren görseller.

Temkinli yaklaşılması gerekenler

Kaydırmaya bağlı ağır sahne animasyonları, tam ekran arka plan videoları ve sürekli hareket eden öğeler etkileyici görünebilir ama mobilde hızı ve erişilebilirliği zorlar. Bu öğeleri tasarımınızda kullanmaya karar verirseniz, hareketi azaltma tercihini dikkate alın ve performans ölçümünü yayından önce yapın.

Bütçeyi ve süreyi ne belirler?

Bir dijital tasarım projesinin bütçesini ve süresini; özel çizim ya da hazır tema tercihi, farklı şablon sayısı, içerik hazırlığı, dil sayısı, entegrasyonlar ve e-ticaret gibi ek işlevler belirler. Sayfa sayısı tasarım maliyetinde tek başına iyi bir ölçü değildir; aynı şablonu kullanan on sayfa, birbirinden farklı üç şablondan daha az emek isteyebilir.

  • Özel tasarım mı, tema mı: Sıfırdan kurulan arayüz daha fazla keşif, çizim ve geliştirme ister; tema uyarlaması daha hızlıdır ama esnekliği sınırlıdır.
  • Tasarım şablonu sayısı: Ana sayfa, hizmet, ürün, blog ve iletişim gibi farklı düzenlerin her biri ayrı emektir.
  • İçerik: Metin, fotoğraf ve video hazır mı, yoksa üretilmesi mi gerekiyor?
  • Dil ve pazar: Her dil yeni içerik, kontrol ve teknik kurulum demektir.
  • Entegrasyonlar: CRM, ERP, ödeme, randevu ya da pazar yeri bağlantıları tasarım ve geliştirme kapsamını büyütür.

Rakam ve paket karşılaştırması için web sitesi fiyatları sayfamıza, Bursa'da yüz yüze çalışmak isterseniz Bursa web tasarım sayfamıza göz atabilirsiniz.

Temsili Bir tasarım projesinin bütçesini belirleyen etkenlerin temsili ağırlıkları; gerçek dağılım projeye göre değişir.

Tasarım terimleri sözlüğü

Dijital tasarım projelerinde ekiplerle konuşurken en sık duyacağınız kavramların kısa tanımları.

Wireframe (taslak)
Sayfanın renk ve görsel olmadan çizilmiş iskeleti; içeriğin sırasını ve yerleşimini onaylamak için kullanılır.
Prototip
Ekranların birbirine bağlandığı, tıklanabilir bir deneme modeli; kod yazılmadan önce akışı test etmeyi sağlar.
UI (kullanıcı arayüzü)
Kullanıcının gördüğü ve etkileşime girdiği görsel katman: butonlar, formlar, menüler, renkler ve yazılar.
UX (kullanıcı deneyimi)
Kullanıcının bir işi yapmaya çalışırken yaşadığı sürecin tamamı; akış, içerik önceliği ve kolaylık.
Bilgi mimarisi
Sitedeki içeriğin sayfalara, menülere ve kategorilere nasıl bölüneceğini belirleyen yapı.
Duyarlı (responsive) düzen
Aynı sayfanın telefon, tablet ve masaüstü ekranlarına kendini uyarlaması.
Design token
Renk, boşluk ve yazı boyutu gibi değerlerin isimlendirilmiş, hem çizim dosyasında hem kodda kullanılan karşılığı.
Bileşen
Buton, kart ya da form alanı gibi tekrar kullanılan, kuralları belirlenmiş arayüz parçası.
WCAG
Web içeriğinin erişilebilirliği için uluslararası kabul gören yönergeler; A, AA ve AAA düzeylerinden oluşur.
Kontrast oranı
Metin rengi ile arka plan arasındaki parlaklık farkının ölçüsü; okunabilirliğin temel göstergesidir.
LCP, INP, CLS
Google'ın Core Web Vitals göstergeleri: yükleme hızı, etkileşime tepki ve görsel kararlılık.
Mikro etkileşim
Bir işlemin sonucunu gösteren kısa, tek amaçlı hareket ya da geri bildirim; örneğin butona basınca beliren onay.

Sık yapılan hatalar ve nasıl önlenir?

Tasarımda en sık yapılan hatalar, ekranın kimin için ve hangi iş için yapıldığı sorusunun atlanmasından doğar. Aşağıdaki liste, site tasarımı yenileme projelerinde en çok karşılaştığımız sorunları ve çözümlerini özetliyor.

  1. Masaüstünde onaylayıp mobilde unutmak. Çözüm: Taslak ve prototipleri önce telefonda gözden geçirin.
  2. İçerik gelmeden ekran çizmek. Yer tutucu metinle güzel duran düzen, gerçek metin gelince dağılır. Çözüm: Taslak aşamasında gerçek ya da gerçeğe yakın içerikle çalışın.
  3. Her şeyi öne çıkarmaya çalışmak. Her öğe vurgulandığında hiçbir şey vurgulanmaz. Çözüm: Her ekranda tek bir ana mesaj ve tek bir ana eylem seçin.
  4. Kişisel zevke göre karar vermek. Tasarım kararında "Ben bu rengi sevmedim" yerine "Bu renk butonu yeterince görünür kılıyor mu?" sorusunu sorun.
  5. Hızı sona bırakmak. Ağır görseller ve efektler yayından sonra düzeltilmeye çalışıldığında tasarım maliyeti artar. Çözüm: Performans bütçesini çizim aşamasında belirleyin.
  6. Erişilebilirliği "sonra bakarız" diye ertelemek. Kontrast, odak ve form etiketleri tasarıma sonradan eklendiğinde çoğu zaman ekranların yeniden düzenlenmesi gerekir.
  7. Dosya ve hesap sahipliğini netleştirmemek. Tasarım dosyaları, alan adı, barındırma ve yönetim paneli erişimleri işletmenin adına olmalıdır.
  8. Yayından sonra ölçmemek. Analiz ve dönüşüm takibi olmadan hangi kararın işe yaradığı bilinmez.

En iyi tasarım ekibi nasıl seçilir?

En iyi tasarım ekibi, en gösterişli portföye sahip olan değil; işinizi anlayan, süreci şeffaf yürüten, çizdiğini koda doğru aktarabilen ve sonucu ölçen ekiptir. Seçim yaparken aşağıdaki kriterleri sırayla sorgulamanızı öneriyoruz.

Değerlendirme kriterleri

  1. Canlı ve hızlı işler: Portföydeki siteler gerçekten yayında mı? Telefonda hızlı açılıyor ve rahat kullanılıyor mu?
  2. Yazılı bir tasarım süreci: Keşif, taslak, prototip, test ve yayın aşamaları ve her aşamanın çıktısı baştan belli mi?
  3. Çizim ile kod arasındaki köprü: Ekranları çizen ekip, geliştirmeyi de yapıyor ya da yakından denetliyor mu? Aradaki kopukluk, onaylanan ekranla yayına çıkan site arasında fark yaratır.
  4. Performans ve erişilebilirlik bilgisi: Core Web Vitals ve kontrast gibi konular ilk görüşmede gündeme geliyor mu?
  5. SEO ve içerik farkındalığı: Site yenilenirken mevcut sıralamaların ve yönlendirmelerin korunması planlanıyor mu?
  6. Sahiplik ve devir: Tasarım dosyaları, kaynak kod, alan adı ve panel erişimi size mi ait olacak?
  7. Yayından sonraki destek: Bakım, güncelleme ve küçük değişiklikler için nasıl bir model sunuluyor?

Duman Dijital bu kriterleri nasıl karşılar?

Duman Dijital, Bursa merkezli bir yazılım ve dijital pazarlama ajansıdır; web ve arayüz tasarımını yazılım, SEO ve reklamla aynı ekipte yürütür. 2018'den beri ekranları çizen ve kodlayan kişiler aynı masada oturuyor; bu yüzden onaylanan tasarım prototipi ile yayına çıkan site arasındaki fark en aza iniyor. Shopify, WooCommerce/WordPress, OpenCart, T-Soft, Ticimax ve IdeaSoft deneyimimiz ve Python, PHP, Node.js, Next.js ve React ile özel geliştirme yetkinliğimiz, hazır tema ile tamamen özel arayüz arasında doğru seçimi yapmamızı sağlıyor. Kendi ürünümüz İş Küpü'nün arayüzünü de aynı tasarım ilkeleriyle çizip geliştirdik.

Her projede hız ve erişilebilirlik hedeflerini çizim aşamasında belirliyor, dosya ve hesapları sizin adınıza teslim ediyor, yayından sonra ölçerek iyileştiriyoruz. Şablon görünümlü değil, markanıza ait ve ölçülebilir biçimde çalışan arayüzler üretme kararlılığıyla, Türkiye'nin en iddialı tasarım ve yazılım ekiplerinden biri olmayı hedefliyoruz.

Kurumsal siteler için kurumsal web tasarım, online satış için e ticaret sitesi, sosyal medya görselleri için sosyal medya yönetimi sayfalarımızı inceleyebilirsiniz. Hazırsanız aşağıdaki formdan teklif isteyin ya da 0539 748 53 22 numarasından hafta içi 09:00–18:00 arasında bize ulaşın.

Sıkça sorulan sorular

Tasarım ile yazılım arasındaki fark nedir?

Tasarım, ekranın nasıl görüneceğini ve nasıl çalışacağını planlar; yazılım ise bu planı tarayıcıda ya da uygulamada çalışan koda dönüştürür. Tasarım ile kod arasındaki aktarım ne kadar yakın olursa, onaylanan ekranla yayına çıkan ürün o kadar benzer olur. Kapsamlı panel ve uygulamalar için özel yazılım geliştirme sayfamıza bakabilirsiniz.

Hazır tema mı, özel tasarım mı tercih edilmeli?

Hızlı yayına çıkmak ve tasarım bütçesini sınırlı tutmak istiyorsanız iyi seçilmiş bir tema mantıklıdır. Markanızı rakiplerden ayırmak, özel akışlar kurmak ya da performansı en üst düzeyde tutmak istiyorsanız özel çalışma daha doğru olur. Karar, sitenin iş hedefine ve büyüme planına göre verilmelidir.

Bir web sitesinin tasarımı ne kadar sürer?

Süre; tasarım şablonu sayısına, içeriğin hazır olup olmamasına, onay süreçlerine ve entegrasyonlara göre değişir. Basit bir tanıtım sitesinin tasarımı birkaç haftada, çok dilli ya da entegrasyonlu projeler daha uzun sürede tamamlanır. Takvimi keşif toplantısından sonra yazılı olarak paylaşıyoruz.

Tasarım dosyaları ve kaynak kod kime ait olur?

Bizim çalışma biçimimizde çizim dosyaları, kaynak kod, alan adı, barındırma ve yönetim paneli erişimleri proje sonunda işletmenize teslim edilir. Tasarımda kullanılan lisanslı yazı tipleri ve görseller için lisans koşullarını da ayrıca paylaşıyoruz.

Logomuz ya da kurumsal kimliğimiz yoksa nereden başlamalıyız?

Önce temel kimlik kararlarını vermek gerekir: logo, renk paleti ve yazı tipleri. Bunlar netleşmeden site tasarımına başlanırsa, sonradan yapılan değişiklikler tüm ekranları etkiler. Kimlik çalışmasını sitenin ihtiyaçlarını gözeterek, ekran kullanımına uygun biçimde birlikte planlayabiliriz.

Yapay zekâ araçlarıyla tasarım yapmak yeterli mi?

Yapay zekâ tasarım araçları fikir üretmek, hızlı taslak çıkarmak ve görsel varyasyon denemek için faydalıdır. Ancak marka stratejisi, içerik önceliği, erişilebilirlik, performans ve dönüşüm kararları hâlâ insan yargısı ve gerçek kullanıcı verisi ister. Bu tasarım araçlarının ürettiği ortalama görünüm, markanızı rakiplerden ayırmak yerine onlara benzetebilir.

Kaç revizyon hakkımız olur?

Tasarım aşamasında genellikle iki tur revizyon öngörüyor ve bunu teklifte açıkça yazıyoruz. Tasarım taslağı aşamasında yapılan değişiklikler ucuzdur; kod aşamasında yapılan büyük değişiklikler pahalıdır. Bu yüzden tasarım onaylarını aşama aşama alıyor, büyük kararları erken netleştiriyoruz.

Mevcut sitemizi baştan yapmadan iyileştirebilir miyiz?

Çoğu zaman evet. Tasarımda ilk ekranı, ana eylem butonlarını, formları, mobil menüyü ve görsel optimizasyonunu düzeltmek, tam bir yenilemeden önce hızlı kazanımlar sağlayabilir. Hangi adımın önce gelmesi gerektiğini ücretsiz ön analiz ile belirleyebiliriz.

Sosyal medya tasarımlarını web sitesiyle aynı ekipten almak mantıklı mı?

Aynı ekip çalıştığında renk, yazı ve fotoğraf dili tüm kanallarda tutarlı kalır; reklam ya da sosyal medyada ilgi gören bir mesaj siteye, sitedeki bir içerik de sosyal medyaya kolayca taşınır. Ayrıntılar sosyal medya yönetimi hizmetimiz sayfasında.

Tasarımın başarılı olduğunu nasıl anlarız?

Hedefe bağlı ölçülerle: teklif formu ve telefon tıklaması sayısı, dönüşüm oranı, sayfada kalma ve hemen çıkma davranışı, mobil ve masaüstü arasındaki fark ve Core Web Vitals değerleri. Yeni tasarım yayına çıkmadan önce bu ölçümleri kuruyor, ilk haftaların verisine göre iyileştirme yapıyoruz.

İçerikleri ve fotoğrafları kim hazırlar?

İçerik sizden gelebilir ya da birlikte hazırlayabiliriz. Hangi durumda olursa olsun, tasarım taslağı aşamasında içerik şablonu veriyor ve her sayfada hangi bilginin gerektiğini netleştiriyoruz. Profesyonel fotoğraf ve video çekimi ayrı bir iş kalemidir.

Bursa dışındaki firmalarla da çalışıyor musunuz?

Evet. Bursa merkezliyiz ve Türkiye genelinde hizmet veriyoruz. Toplantıları çevrim içi yapıyor, tasarım prototiplerini paylaşılan bağlantılar üzerinden birlikte inceliyoruz. Bursa'daki firmalarla yüz yüze de çalışabiliyoruz.

İlgili hizmetler

İlgili

Kurumsal Web Tasarım

Web tasarım ajansı olarak büyük firmalara sıfırdan özel arayüz, hızlı başlamak isteyenlere hazır platform üzerinde markaya uyarlanmış bir site sunuyoruz. İkisinde de hedef aynı: hızlı açılan, kolay yönetilen ve iş getiren bir site.

İnceleyin
İlgili

Web Sitesi Fiyatları

Web sitesi fiyatlarını sayfa sayısından çok tasarım yöntemi, içerik, dil ve entegrasyonlar belirler. Bu sayfada teklifimizi neyin oluşturduğunu açıkça anlatıyoruz.

İnceleyin
İlgili

Bursa Web Tasarım

Bursa web tasarım hizmetimiz, şehrin üreticileri ve ihracatçıları için çok dilli, kataloğu kolay gezilen ve yurt dışındaki alıcıya güven veren siteler kurar. Toplantıyı fabrikanızda, ekibinizle yüz yüze yapıyoruz.

İnceleyin
İlgili

Sosyal Medya Yönetimi: Sosyal Medya Ajansı Hizmeti

Sosyal medya yönetimi hizmetimizle ürünlerinizi öne çıkaran, markanızı daha kurumsal ve prestijli gösteren tasarımlar, planlı bir içerik takvimi ve düzenli paylaşım alırsınız. Hesaplarınızı sizin adınıza biz yönetiyoruz.

İnceleyin
İlgili

E-Ticaret Sitesi Yaptırma ve Kurulum

E-ticaret sitesi kuruyoruz: altyapı seçiminden ödeme, kargo ve fatura entegrasyonuna, yasal metinlerden ölçüm kurulumuna kadar satışa hazır. Site açıldıktan sonra da yanınızda kalıyoruz.

İnceleyin

Diğer rehberler

Rehber

E-Ticaret Nedir, Nasıl Yapılır? Başlangıçtan Büyümeye Rehber

E-ticaret nedir, hangi modelle yapılır ve Türkiye'de satışa başlamak için hangi adımlar gerekir? Bu rehber; yasal yükümlülüklerden altyapı seçimine, pazar yerlerinden pazarlama ve operasyona kadar online satışın bütün resmini sade bir dille anlatır.

Okuyun
Rehber

Reklam Nedir? Dijital Reklam Rehberi ve Türleri

Reklam nedir, hangi türleri vardır ve internette nasıl verilir? Hedeften bütçeye, ölçümden mevzuata kadar reklam konusunu baştan sona anlatan, uygulamaya dönük bir rehber.

Okuyun
Rehber

Yazılım Nedir? İşletmeler İçin Kapsamlı Rehber

Yazılım nedir, hangi türleri vardır ve bir işletme kendisine uygun olanı nasıl seçer? Bu yazılım rehberi; geliştirme sürecinden API ve otomasyona, güvenlikten maliyete kadar karar vermeniz için gereken her şeyi sade bir dille anlatır.

Okuyun

Son güncelleme: · Hazırlayan: Duman Dijital ekibi

Teklif

Projenizi konuşalım.

Formu doldurun, telefonla arayın ya da WhatsApp'tan yazın. Hangi kanal size uygunsa.

Hangi konuda destek istiyorsunuz?
Aylık bütçe aralığı (opsiyonel)
İki adım, yaklaşık bir dakika.
Size nasıl ulaşalım?

Telefon veya e-postadan en az birini yazmanız yeterli.

Teşekkürler.

Talebiniz bize ulaştı. En geç 1 iş günü içinde dönüş yapıyoruz. Acil bir durum varsa doğrudan 0539 748 53 22 numarasını arayabilirsiniz.