BlogDesin TipsUI Tasarımda White Space

UI Tasarımda White Space

Beyaz boşluk, öğelerin etrafındaki boş alanı ifade eder. Beyaz boşluk tasarımlarınızın nefes almasını, okunabilirlik ve anlaşıla bilirlik bakımından ön plana çıkmasını sağlar.

1. Yakınlık Yasasına uyun

Kullanıcı arabirimindeki öğeler arasındaki boşluk miktarı, öğelerin birbiriyle nasıl ilişkili olduğunu gösterir. Yakınlık Yasası şunları önerir:

  1. İlgili öğeler birbirine daha yakın yerleştirilmelidir. Tersine, ilgisiz öğeler birbirinden daha uzağa yerleştirilmelidir.
  2. Aynı “tür”deki öğeler eşit aralıklarla yerleştirilmelidir.

Kullanıcıların kullanıcı arayüzündeki mantıksal gruplamaları kolayca düzenlemelerine ve algılamalarına yardımcı olmak için bu temel kuralları izleyin.

2. Nefes aldırın

Tasarımınızın nefes almasına izin verin. Bir arabirimin kullanılabilirliğini geliştirmenin güvenilir bir yolu, tüm öğeleri arasında bol miktarda boşluk olmasını sağlamaktır.


3. Dikkati belirli tasarım öğelerine odaklamak

Beyaz boşluk, metne vurgu eklemenin de etkili bir yolu olabilir. Metin boyutunu büyütmek veya metnin rengini, büyük/küçük harflerini veya ağırlığını değiştirmekle birlikte — ve hatta buna alternatif olarak — kullanılabilir.

̇

̇

lorem ipsum dolar ahmet.

̣

̣

Bir öğeyi daha büyük veya daha parlak hale getirmek, ona dikkat çekmenin tek yolu değildir. Her şey daha büyük, daha parlak ve önemli olduğunda, aslında hiçbir şeyin olmadığını düşünün. Her şey daha büyük, daha parlak ve önemli olduğunda, aslında hiçbir şeyin olmadığını düşünün.

4. Bir boşluk sistemi kullanın.

Bir boşluk sistemi, bir tasarımda kullanılacak olası boşluk değerleri kümesini belirtir. Bir boşluk sistemi kullanmak, bir kullanıcı arayüzüne tutarlılık ve uyum duygusu getirmeye yardımcı olabilir.

Renk paleti renklendirmek için ne ise, boşluk sistemi de boşluk için odur. Tıpkı bir renk paleti gibi, bir boşluk sistemi sizi kısıtlı seçenekler arasından UI tasarım kararları almaya zorlar. Yerinde bir boşluk sistemi ile, UI tasarım sürecinde sistemden yalnızca bir avuç boşluk değerini dikkate almanız gerekir. Bu, tasarım yinelemesini daha hızlı ve daha sistematik hale getirir.

5. Başlıklar

Aynı orantılı satır yüksekliğini korurken metin boyutunu artırmak, metnin her satırı arasında çok fazla boşluk kalmasına neden olur. Metin boyutuna göre, başlıkların orantılı satır yüksekliği genellikle metin metninin satır yüksekliğinden daha az olmalıdır.


Tasarım, girişimcilik, mentorluk veya herhangi bir konu hakkında sohbet edelim. 😎

© 2023, Murat Çelik — Product Designer. Samsun, TR 🇹🇷

This is a staging enviroment