Tasarımcılar İçin Gestalt İlkeleri

Güvendiğin her arayüz Gestalt ile çalışır. Linear, Stripe, Vercel, Figma, Notion, Apple. Hiçbiri yeni bir algı kuralı icat etmedi. İnsan görsel sisteminin ekranlar var olmadan önce de uyguladığı kurallara uydular. Bu itaat, kendini okutan bir ekranla kullanıcının çözmek zorunda kaldığı bir ekran arasındaki farktır.

Gestalt ilkeleri, bilinçli zihin devreye girmeden önce beynin ham pikselleri anlama dönüştürme biçimidir. Bunları bilen tasarımcılar sakin hissettiren arayüzler çıkarır. Bilmeyenler, görsel yoğunluk birebir aynı olsa bile kalabalık hissettiren arayüzler çıkarır. Pikseller aynıdır. Değişen şey gruplamadır.

Bu yazı kanondur. Sekiz ilke, her biri için tek kural, her biri için gerçek ürün örnekleri ve yayına çıkmadan önce her ekranda çalıştırabileceğin bir denetim. Yer imlerine ekle.

Sekiz ilke, her biri için tek yasa

Gestalt, "bütün, parçalarının toplamından büyüktür" demenin kısa yoludur. Bir nokta yığını yüze dönüşür. Bir kart sırası listeye dönüşür. Beyin, içerikten önce gruplamayı yapar. Tasarımın bunu yok sayarsa kullanıcı beynin işini elle yapmak zorunda kalır ve yapmaz.

Çalışan her tasarımcının ihtiyaç duyduğu sekiz ilke. Kuralı ezberle, gerisi uygulamadır.

1. Yakınlık. Birbirine yakın şeyler bir grup olarak okunur.

2. Benzerlik. Birbirine benzeyen şeyler bir grup olarak okunur.

3. Süreklilik. Göz, bir yerleşimde en pürüzsüz yolu izler.

4. Kapanım. Beyin eksik şekilleri tamamlayıp bütün hale getirir.

5. Figür ve zemin. Göz yerleşimi ön plan ve arka plan olarak ayırır.

6. Ortak kader. Birlikte hareket eden şeyler bir grup olarak okunur.

7. Simetri ve düzen. Simetrik, düzenli yerleşimler içerik gelmeden önce çözülmüş hissettirir.

8. Odak noktası. Desendeki tek bir kırılma, ekranın tüm dikkatini kazanır.

Saygı duyduğun her üründeki her ekran bunlardan birkaçını aynı anda kullanır. Çoğu sekizini birden kullanır. İlkeler birlikte çalışır, birbiriyle yarışmaz.

Yakınlık: boşluk gruplamanın kendisidir

Boşluk, çerçevelerden, ayırıcılardan ve etiketlerden daha fazla anlam taşır. İki öğe yakın duruyorsa göz onları ilişkili okur. Üçüncü öğe iki kat uzaktaysa göz bir kopuş okur. Etikete gerek yok. İşi boşluk yaptı.

Linear'ın kenar çubuğu, şimdiye kadar yayınlanmış en temiz yakınlık demosudur. Inbox, My Issues ve Active sıkı bir grupta durur. Projects, Views ve Teams başka bir grupta. Settings en altta tek başına durur. Gruplar arasında ayırıcı yok, yalnızca boşluk var ve kategoriler anında okunuyor.

Stripe Dashboard metrik satırında aynısını yapar. Gelir, ödemeler ve müşteriler tek bir karo olarak kümelenir, bakiyeler ve ödemeler başka biri olarak. Aynı tuval, farklı ritim, üç net bölüm.

Karşıt örüntü, tüm ekranda tekdüze boşluktur. Her öğe diğer her öğeden aynı uzaklıkta durur ve kullanıcı yapıyı bulmak için her etiketi okumak zorunda kalır. Çözüm asla daha fazla çerçeve eklemek değildir.

Çözüm, gruplar arasındaki aralıkları açmak ve grupların içindeki boşlukları daraltmaktır. Boşluk tasarımın yokluğu değil, tasarımın kendisidir. Konunun daha derin hali boşluk sözlük maddesinde duruyor.

Uygulama kuralı: grubun içinde boşluk dar. Gruplar arasında geniş. Yan yana asla aynı değer iki kez gelmesin, yeter ki iki öğeyi tek bir öğe olarak kastetmiyor ol.

Benzerlik: eşleşen şekiller eşleşen anlamlardır

Tekrarlanan görsel işlem, tekrarlanan işlevi işaret eder. İki öğe benziyorsa kullanıcı aynı işi yaptıklarını varsayar. Yapmıyorlarsa tasarım yalan söylüyordur.

Notion benzerlik üzerine kuruludur. Aynı türdeki her blok aynı biçimde görünür. Başlıklar başlık gibi, callout'lar callout gibi, kod blokları kod bloğu gibi görünür. Kullanıcı görsel sözlüğü beş dakikada öğrenir ve sonrasında bin bloklu bir dokümanı okumadan tarayabilir.

Figma'nın sol paneli de aynı mantıkla çalışır. Frame'ler frame gibi, bileşenler bileşen gibi görünür; instance'lar ana bileşenin görünümünü miras alır ama "bu bir kopya" diyen mor sargıyla. Şekil, kullanıcıya kuralları öğretir.

Apple'ın iOS ana ekran ızgarası tüketici ölçeğindeki versiyondur. Her uygulama ikonu aynı boyutta, aynı köşe yarıçapında, aynı ızgara aralığında. Göz "uygulamaları" tek bir kategori olarak okur ve yalnızca niyet devreye girdiğinde seçmeye geçer. Benzerliği bozarsan okumayı bozarsın. Izgaradan çıkmış tek bir ikon, tüm ızgarayı bir birim olarak çökertirdi.

Cursor'ın diff görünümü aynı mantığı daha küçük ölçekte çalıştırır. Eklenen satırlar aynı yeşil, silinen satırlar aynı kırmızı, değişmeyen satırlar aynı nötr. Üç kategori, üç işlem, etikete gerek yok.

Karşıt örüntü "dikkat çekmek için şu butonu farklı yapalım" cümlesidir. Bu, diğer her yerdeki benzerlik sözleşmesini bozar. Kullanıcı hangi kuralların hâlâ geçerli olduğunu anlamak için her butonu yeniden okumak zorunda kalır. Tek bir eylemi öne çıkarmak istiyorsan benzerliği ihlal etme, aşağıdaki odak noktası ilkesini kullan.

Süreklilik: göz çizgiyi izler

Göz, kesintisiz yolları kesintili olanlara tercih eder. Bir hizada, bir eğri boyunca ya da bir eksen üzerinde hareket etmeye başladı mı, devam etmek ister. Buna saygı gösteren tasarımcılar tek nefeste taranan yerleşimler çıkarır. Göstermeyenler takılan yerleşimler çıkarır.

Vercel'in deploy görünümü üretimdeki süreklilik örneğidir. Pipeline, dikey bir aşama çizgisi olarak akar; her aşama aynı eksene, aynı girintiyle oturur. Göz, en üstteki build commit'inden en alttaki deploy'a tek hamlede okur, uzun loglarda bile. yükleme durumu üründür yazısı bu yüzeyin neden bu kadar çok izlenme süresi aldığını anlatır. Cursor'ın diff oluğu daha küçük bir eksende aynısını yapar; değişiklik işareti, gözün satır satır takip ettiği temiz bir dikey çizgiye yaslanır.

Karşıt örüntü, görsel çeşitlilik için hizayı bozmaktır. Girintileri kaydır, satır yüksekliklerini değiştir, yarı yola ortalanmış bir öğe at, göz yolu kaybeder. Kullanıcı bir yerleşim okumuyor, bir bulmaca çözüyor.

Çözüm bir eksen seçmek ve içeriğin, tek tek öğeler farklı olsa bile, onun üzerinde durmasına izin vermektir. Stripe'ın fatura listesi, Linear'ın issue listesi, Anthropic'in dokümantasyon navigasyonu. Hepsi düz, hepsi hizalı, hepsi tek bir göz geçişinde okunur.

Uygulama kuralı: şüphedeysen hizala. Zorunlu hiza, sanatsal asimetriden daha hızlı okunur.

Kapanım: beyin şekli bitirir

Eksik şekiller otomatik olarak tamamlanır. 40 derecesi eksik bir daire hâlâ daire olarak okunur. Kasıtlı bir çentiği olan logo hâlâ marka olarak okunur. Beyin boşluğu doldurur, çünkü kesinti görmektense bütün görmeyi tercih eder.

Anthropic'in logomark'ı ders kitabı örneğidir. İki açılı form hiç kapanmaz, ama göz onları birleşik bir işaret olarak dikiş atar. Loops, loop logosunda kapanımı kullanır; kıvrım şekil açık olsa bile tam bir devreyi ima eder.

Figma seçimde kapanımı kullanır. Dört köşedeki mavi tutamaçlar, yalnızca köşeler çizilmiş olsa bile tam bir sınırlayıcı dikdörtgeni ima eder. Kullanıcı dört havada duran nokta değil, bir frame görür.

Kapanım, hero bölümlerinin çerçevesiz çalışmasının da sebebidir. Yalnızca boşluk ve bir başlıkla tanımlanmış bir hero bölümü, göz ima edilen dikdörtgeni kapattığı için hâlâ kapalı bir birim olarak okunur. Aynı mantık minimalist kartları, alıntı bloklarını ve hayalet CTA butonlarını yönetir. İçerik ima ediyorsa sınırın çizilmesine gerek yoktur. Bunu başarmak, ima edilen sınırın hâlâ okunması için kontrast oranına saygı göstermeye bağlıdır.

Karşıt örüntü, her kabı fazla çizmektir. Ağır çerçeveler, kalın ayırıcılar, her panelde tam çizgili konturlar. Ekran dağınık kalır, her şekil kapanım dikkati için yarışır. Çizgileri kırp. Göze güven.

Figür ve zemin: çerçevesiz derinlik

Göz her sahneyi ön plan ve arka plan olarak ayırır. Dikkat böyle çalışır. Geriye ittiğin şey bağlam olur, öne çıkardığın şey özne olur.

Apple'ın modal kalıbı klasik demodur. Arka plan bulanıklaşır ve kararır, modal yumuşak bir gölgeyle öne çıkar ve kullanıcının dikkati metin okunmadan önce hareket eder. Stripe'ın katmanları aynı kalıbı izler, biraz daha az dramatik ama mantık özdeş. Ödeme butonunun parıltısı, hafifçe geriye çekilmiş bir kartın üstünde süzülür. Resend'in onay diyalogları neredeyse aynı figür-zemin hamlesini kullanır; tüm uygulama bir kademe geriye düşer, diyalog öne adım atar.

Karşıt örüntü, derinlik değişimi olmayan düz katmandır. Modal, arayüzün geri kalanıyla aynı yükseklikte tuvalin üstünde durur ve kullanıcı odak değişimini hissetmez. Çözüm, ön planı işaret eden gerçek algı ipuçlarını katmanlamaktır.

Gölge, bulanıklık, karartma, ölçek. En az ikisini seç. anti-dashboard yazısı, her panel aynı yükseklikte durduğunda dashboard'ların figür-zemini nasıl sızdırdığını anlatır.

Uygulama kuralı: her öğe aynı düzlemdeyse hiçbiri ön planda değildir. Önemli olanı seç ve yukarı kaldır.

Ortak kader: hareket gruplamadır

Birlikte hareket eden şeyler tek bir şey olarak okunur. Üç öğeyi sürükle, uyum içinde kaymalarını izle; şekilleri farklı olsa bile göz onları tek bir birim olarak okur. Hareketi durdur, birlik bozulur.

Figma'nın çoklu seçimi iş başındaki ortak kaderdir. Üç katmanı tut, taşı, koordineli bir birim olarak giderler. Figma hiç grup istemediği halde kullanıcı tek bir gruplanmış nesneyi düzenliyordur.

Linear'ın sürükleyerek yeniden sıralaması aynı numarayı issue listelerinde kullanır. Bir issue'yu kaldır, çevredeki satırlar koordineli bir hareketle kayar ve yeni konum apaçık okunur. Notion'ın blok sürüklemesi de aynıdır; çevredeki bloklar yer açmak için uyum içinde animasyonla ayrılır.

Ortak kaderin öteki ucu kaldırmadır. Üç öğeyi aynı hızda ve yönde ekrandan çıkar, kullanıcı onları grup olarak silinmiş okur. Farklı hızlarda çıkar, kullanıcı bazılarının başarısız olup olmadığını merak eder. Onboarding akışları bunu ödünç alır: slaytlar tek bir hareket vektörüyle ilerler ve kullanıcı yolculuğu tek bir yol olarak okur. Hareketin yapı olarak daha derin ele alınışı onboarding'siz onboarding yazısında duruyor.

Karşıt örüntü, mantıksal olarak gruplanmış öğelerde eşzamansız harekettir. Aynı seçime ait ama farklı zamanlamalarla, farklı easing'lerle, hafifçe farklı vektörlerde animasyon yapan üç kart. Veri tek olduklarını söylese de kullanıcı onları ayrı okur. Hareketi kilitle. Grup, grubun hareket ettiği yerde okunur.

Simetri ve düzen: denge çözülmüş hissettirir

Simetrik yerleşimler yüklenmeyi bitirmeden önce bitmiş hissettirir. Beyin düzenliliği yetkinlik olarak okur. Asimetrik yerleşimler güçlü olabilir, ama kullanıcıya başka yollarla hak edilmesi gereken bir algı vergisine mal olur.

Stripe'ın fiyatlandırma sayfası ders kitabı örneğidir. Üç sütun, özdeş kart yapısı, kusursuz hizalı dikey ritim, orta plan öneriyi işaretlemek için hafifçe yükseltilmiş. Kullanıcı fiyatları okumadan önce "bu gerçek bir ürün ekibi" diye okur.

Apple'ın ürün ızgaraları pazarlama sitesinde aynısını yapar. Vercel'in dashboard panelleri, paneller yeniden akarken bile tutan katı bir ızgarada çalışır. Kompozisyon istikrar sinyali verir. Bu tür fiyatlandırma yapısının daha derin ele alınışı fiyatlandırma sayfası problemi ve daha geniş 2026 pazarlama sitesi stack'i incelemesinde duruyor.

Karşıt örüntü "yaratıcı görünsün" cümlesidir. Düzensiz genişlikte kartlar, hizalanmayan sütunlar, işlevsel bir sebep olmadan yükseklikleri değişen satırlar. Kullanıcı kaos okur.

Asimetrik tasarımın bir yeri var, ama bu güçlü bir odak noktası ve net bir hiyerarşi gerektiren kasıtlı bir kompozisyon tercihidir. Bir SaaS dashboard'u için varsayılan değildir. Izgarayı bozan her dashboard bunun bedelini tarama süresiyle öder.

Uygulama kuralı: simetrik başla, bilerek boz. Ekran sıkıcı göründü diye asla bozma.

Odak noktası: tek bir kırılma ekranı kazanır

Göz, deseni kıran tek öğeye tam dikkatini verir. Mat gri ikincil eylemlerle dolu bir ekranda mercan rengi bir ana butonun kazanmasının sebebi budur. Beş "ana" eylemi olan bir ekranın sıfır ana eylemi olmasının da sebebi budur.

Linear'ın komut paleti bir odak noktası kliniğidir. Arayüzün geri kalanı kararır ve geri çekilir, palet tek bir yüksek kontrastlı yüzey olarak öne çıkar ve vurgulanmış tam olarak bir varsayılan eylem vardır. Kullanıcı düşünmeden nereye bakacağını bilir.

Stripe'ın ödeme butonu e-ticaret versiyonudur. Buton, marka rengi, hafif hareket ve biraz daha büyük ölçekle deseni kırar. Anthropic'in açılış sayfaları, aksi halde nötr bir sayfada tek bir mercan rengi CTA'ya demir atar ve göz başlık bitmeden ona konar. Cursor'ın AI önerilerindeki "Apply" butonu aynı mantıkla çalışır.

Karşıt örüntü, üç "ana" butonu ve eşit ağırlıkta navigasyon öğeleri denizi olan ekrandır. Her odak noktası diğerini iptal eder. Kullanıcının gözü takılır, çünkü hiçbir şey kazanacak kadar sert kırmaz.

Çözüm acımasız bir rütbe düşürmedir. Bir ana eylem seç, geri kalan her şeyi ikincil ya da üçüncül işleme indir. Ağırlık çıkarmış olsan da ekran daha gürültülü hissettirir, çünkü hayatta kalan tek şey artık gerçekten gözü çeker. Bunun daha derin ele alınışı tasarımda görsel hiyerarşi yazısında ve 2026'da her SaaS neden aynı görünüyor yazısının sektör genelinde odak noktası enflasyonunu nasıl çözdüğünde duruyor.

Gestalt ilkesi ve UI kalıbı

En hızlı başvuru. İlke başına bir satır, bir kural, bir modern örnek, bir ürün. Bu satırı ömür boyu sakla.

Tek bir kaydetmelik varlığı içselleştireceksen bunu içselleştir. Çalışan her tasarımcı, ilk tasarım incelemesinden önce bu satırı ezbere sayabilmeli.

Bir ekranı Gestalt için nasıl denetlersin

Bir ekranı yayına çıkmadan önce bu sekiz sorudan geçir. Herhangi bir cevap "hayır" ise, yüzeyde iyi görünse bile ekran algı sızdırıyordur.

1. Yakınlık. İlişkili öğeler, ilişkisiz öğelerden çok birbirine yakın mı? Boşluk ekran boyunca tekdüzeyse yakınlık gruplaması gerçekleşmiyordur.

2. Benzerlik. Aynı işleve sahip öğeler görsel işlemi paylaşıyor mu? İki buton aynı işi yapıyor ama farklı görünüyorsa benzerlik bozuktur.

3. Süreklilik. Gözün yukarıdan aşağıya ya da soldan sağa net bir yolu var mı? Yerleşim sebepsiz zikzak çiziyorsa süreklilik bozuktur.

4. Kapanım. Kaplar, hâlâ okunan en hafif işlemle mi çizilmiş? Her panelde ağır bir çerçeve varsa kapanım fazla çizilmiştir.

5. Figür ve zemin. Ekranın net bir ön planı var mı? Her öğe aynı yükseklikteyse dikkatin konacağı yer yoktur.

6. Ortak kader. Gruplanmış öğelerdeki animasyonlar uyum içinde mi hareket ediyor? Çoklu seçim parçaları farklı zamanlamalarla sürükleniyorsa grup bozuk okunur.

7. Simetri ve düzen. Yerleşim ilk bakışta çözülmüş hissettiriyor mu? Göz yapıyı bulmak için çalışmak zorundaysa ızgara kullanıcıyla savaşıyordur.

8. Odak noktası. Tam olarak bir ana eylem var mı? İki ya da daha fazlası varsa odak noktası iptal olmuştur.

Bunu herhangi bir üründe, herhangi bir ekranda, herhangi bir durumda çalıştır. Geçen ekranlar sakin hissettirir. Kalan ekranlar, görsel yoğunluk özdeş olsa bile kalabalık hissettirir. Bu denetimi ayarlar sayfası problemi yazısındaki disiplinle eşleştir, en kötü suçluları hızla fark edersin. Azla daha fazlasını yapma doktrini, tasarım sistemine ihtiyacın yok örneği dahil, bu denetimle doğal olarak eşleşir.

İlkeler birlikte çalışır, asla yarışmaz

Harika bir ekran sekizini birden çalıştırır. Yakınlık düzenler, benzerlik doğrular, süreklilik yönlendirir, kapanım temizler, figür ve zemin önceliklendirir, ortak kader canlandırır, simetri dengeler, odak noktası karar verir. Hiçbiri tek başına çalışmaz. Sıraya saygı gösterirsen hiçbiri diğeriyle kavga etmez.

Linear'ın uygulaması çalışan bir ustalık sınıfıdır. Kenar çubuğu yakınlıkla gruplar, issue'lar benzerlikle tekrarlanır, liste süreklilikle kayar, kartlar hafif çerçevelerle kapanır, modal figür ve zeminle yükselir, sürükleme ortak kaderi kullanır, ızgara simetriyle tutar, cmd-K paleti odak noktasıyla kazanır. Tüm ürün, tek bir sekmeye sıkıştırılmış Gestalt itaatidir.

Stripe aynı dersin farklı ölçeğidir. Vercel, Figma, Notion, Apple, Anthropic, Cursor, Loops, Resend. Hiçbiri yeni bir algı yasası icat etmedi. Mevcut olanlara rakiplerinden daha sert uydular.

Tasarım kalitesindeki bütün hendek budur. Sır yok. Yalnızca algı kanonunda akıcılık ve onu her ekranda, her akışta, her durumda uygulayacak sabır var. Kademeli ifşa için daha derin bağlam, belirli akışların içinde aynı rolü oynar.

SSS

Tasarımcılar için sekiz Gestalt ilkesi nedir?

Yakınlık, benzerlik, süreklilik, kapanım, figür ve zemin, ortak kader, simetri ve düzen ve odak noktası. Her biri insan görsel sisteminin otomatik olarak çalıştırdığı bir algı yasasıdır. Bunlara saygı gösteren tasarımcılar kendini okutan arayüzler çıkarır. Göstermeyenler kalabalık hissettiren arayüzler çıkarır.

UI tasarımında en önemli Gestalt ilkesi hangisi?

Yakınlık, açık farkla. Boşluk, çerçeveler, renk ve etiketler dahil diğer her işlemden daha fazla gruplama sinyali taşır. Bir ekranda yalnızca tek bir ilkeyi doğru yapmaya vaktin olsaydı, boşluğu düzelt.

Gestalt görsel hiyerarşiden nasıl farklıdır?

Görsel hiyerarşi stratejidir. Gestalt, altındaki algı fiziğidir. Hiyerarşi "kullanıcı önce buraya baksın" der. Gestalt, gözünün gerçekten neden oraya gittiğini açıklar. Gestalt'a uymadan hiyerarşi kuramazsın; hiyerarşi planı olmadan Gestalt'a uymak ise sakin ama yönsüz ekranlar üretir.

Gestalt ilkeleri AI-native arayüzler için geçerli mi?

Daha da geçerli, daha az değil. AI-native arayüzler geleneksel uygulamalardan daha dinamik içerik, daha fazla akış çıktısı ve daha belirsiz yerleşimler sunar. Gestalt, bu dinamik yüzeyleri okunabilir tutan kural setidir. İçerik gerçek zamanlı değişirken yükün çoğunu ortak kader, benzerlik ve odak noktası taşır.

Gestalt'ı bir tasarım ekibine nasıl öğretirim?

Bir ekranı birlikte denetleyin. Gerçek bir yüzey seç, sekiz sorunun hepsini onun üzerinde çalıştır ve ekibin daha önce adını koyamadığı hataları görmesini izle. Gestalt soyut olarak öğrenilmez. Göz onları otomatik olarak yakalamaya başlayana kadar gerçek ürünlerdeki ihlalleri fark ederek öğrenilir.

CTA

Kullanıcı metni okumadan önce her ekranın kendini okuttuğu bir ürün mü istiyorsun? Brainy, algıyı en sonda boyanmış olarak değil, kemiklerine işlenmiş olarak tasarlar. Kanona her akışta, her durumda, her detayda uyarız. Brainy'yi işe al ve Linear, Stripe ve Anthropic'in varsayılan olarak sunduğu netliği yayınla.