İş Akışınızı Hızlandırmak İçin Bu İpuçlarıyla Kullanıcı Arayüzü Tasarımına Başlayın

Bir tasarım üzerinde çalışırken, bazı metin bloklarını büyütmek veya küçültmek veya bir öğenin etrafındaki boşluk miktarını artırmak (veya azaltmak) gibi tüm olasılıklarla mücadele ediyor musunuz? Peki ya bu renk: Daha koyu mu yoksa daha açık mı olmalı?

Bu makale, tüm tasarım süreci boyunca izlenecek sınırlar ve kurallar oluşturmakla ilgilidir. Bir kullanıcı arabirimindeki öğeleri birleştirmenin sınırsız sayıda yolu vardır ve bu nedenle bazı kurallar ve sınırlar belirlemeniz gerekir, aksi takdirde tasarım iş akışı hoş olmayan bir angarya haline gelebilir. Tüm olasılıklarla boğuşuyor ve birçok “doğru” seçenek arasından en iyisini seçmeye çalışıyor olabilirsiniz. Bazı temel kurallar belirleyerek (ve takip ederek) tasarımınızın da daha tutarlı görünmesini sağlayabilirsiniz.

Kullanıcı Arayüzü Tasarımınızı Tutarlı Hale Getirmenin Önemi

En baştan başlayalım. Tasarımınızın iyi ve güvenilir görünmesini istiyorsunuz ve her ne pahasına olursa olsun kaostan kaçınmanız gerekiyor. Bunun olması için tasarım çalışmalarınız için bir sisteme sahip olmak çok önemlidir.

Geliştiricileriniz de bir sistemi takdir edecek - tasarımınızın düzenli olması ve işlerini kolaylaştırıyor olmanızı sevecekler.

Önceden Belirlenmiş Bir Boyuta Göre Yeniden Boyutlandırma Sistemi

Bir metin bloğunu yeniden boyutlandırmak, bir görüntüyü yeniden boyutlandırmak veya biraz boşluk ayarlamak isteyip istemediğiniz önemli değil. Her bir öğenin ne kadar büyük olacağına karar vermeniz gerekir. Ve bahse girerim şu durumdasınızdır: Hiç bir öğe için bir boyut seçtiniz ve beş dakika sonra onu değiştirdiniz mi ve sonra tekrar ve belki tekrar tekrar?

Hangi boyut mükemmel? Denediklerinden biri olabilir, değil mi? Bu sonsuz zaman kaybı tuzağından kaçınmanız gerekiyor!

Temel Birimi Seçerek Başlayın: 8 Piksel Izgara

Tüm tasarımın daha temiz görünmesini sağlamak için önce tüm boyutları belirleyecek olan ölçüm değerini ayarlamak faydalı olacaktır. Hangi değeri seçeceğiniz tamamen size bağlıdır, ancak çoğu zaman en iyi seçenek birkaç kanıtlanmış kurala bağlı kalmaktır. Ve bu kurallardan biri, öğeleri tam olarak sekiz piksel yeniden boyutlandırmak ve taşımaktır. Bu kural karar verme sürecinizi kolaylaştıracaktır.

px ve dp ile ilgili not : *Piksellere (px) ek olarak, ekran tasarımında ve prototip oluşturmada dp teriminin kullanıldığını duymuş olabilirsiniz. dp birimi, "yoğunluktan bağımsız piksel"in kısaltmasıdır. Birim 160 dpi ekrana göredir, yani 1 dp 160 dpi ekranda 1 piksele ve 320 dpi ekranda 2 piksele eşittir vb. Sayısal değer formülü şudur: px = dp * (dpi/160) .*

Daha küçük öğeler veya nesnelerle çalışıyorsanız, 8 yerine 4 piksellik artışların kullanılmasının da uygun olduğunu her zaman unutmayın. Bazen, gerektiğinde daha fazla ayarlama yapabilirsiniz.

Ama Neden Tam 8 Piksel?

Sekizin burada genellikle "sihirli bir sayı" gibi çalışmasının birkaç nedeni vardır:

• Sekiz piksel yeterli bir minimum "atlama"dır.
• Sekiz büyük bir sayıdır çünkü dörde ve ikiye bölünür.
• Sekiz kullanırsanız, herhangi bir öğeyi yarım pikselle bitmeden 8 / 2 = 4, 4 / 2 = 2 ve 2 / 2 = 1 olarak kolayca yeniden boyutlandırabilirsiniz. Öte yandan, 10 ile başlarsanız, 5 piksel, ardından 2,5 piksel, ardından 1,25 piksel elde edersiniz. Ekran için tasarlarken, mümkün olduğunca yarım pikselden kaçınmak istersiniz. Tam pikseller kullanıldığında, tasarımdaki öğeler kesin piksel sınırlarına göre hizalanacak ve böylece daha net görünecektir.
• Sekizin katları (8, 16, 24, 32, 40, 48, 56, 64, 72, 80 vb.) ikili değerlerle (1, 2, 4, 8, 16, 32, 64, 128, 256) iç içedir. , 512, vb.).
• Son olarak, sayıların hatırlanması kolaydır.
  

8 Piksel Izgara Kullanmanın Avantajları Nelerdir?

• Bir tasarımcı olarak karar verme zamanınız değerlidir. Bu sizi daha hızlı ve daha verimli hale getirecektir.
• Bir geliştirici ile çalışıyorsanız, size ve ekibinize yardımcı olacak bir sistem oluşturabilirsiniz. Geliştiricinin bazı hızlı değişiklikler yapması gerekiyorsa, değerleri 8 piksellik artışlarla ayarlayabilir. Bu, tutarlılık ve düzen sağlayacaktır.
• Web sitenizi kullanan kişiler, ziyaret ettiklerinde kendilerini rahat hissedeceklerdir. Web sitesine güvenecekler ve arayüzü kullanmaları daha kolay olacak.
  

Tüm Elemanları Yerleştirmek İçin Bir Izgara İle Çalışın

Yatay Uyum

Web siteleri tasarlarken zaten bir ızgara kullandığınızdan eminim. Bir ızgara kullanmak, tüm öğeleri dijital tuval üzerine doğru bir şekilde yerleştirmenize yardımcı olur.

Izgara, arayüzünüzün iskeletini oluşturur ve öğeleri nereye yerleştirebileceğinizi belirler. Şablon, kompozisyonu tutar ve tasarımınızın daha tutarlı olması için net sınırlar tanımlar. Artık öğeleri nereye koyacağınıza karar vermeniz daha kolay olacak. Daha fazla deneyim kazandıkça, sınırları gerektiği gibi güncelleyebilirsiniz.

Ama bu ızgarayı nasıl yaratırsınız? Daha sonra ayrıntıları ele alacağız. Temel olarak, sütunların sayısı ve boyutu rastgele olabilir ve ihtiyaçlarınıza bağlıdır. Tasarımınız ne kadar ayrıntılı olursa, ızgara o kadar fazla sütun gerektirecektir. Tereddüt ediyorsanız, deneyimli bir meslektaşınızdan yardım isteyin.

Ayrıca, kullanıcı arayüzü tasarımını biraz daha derinlemesine anlamanıza yardımcı olacak “Kullanıcı Arayüzü Tasarımı İçin Kapsamlı Bir Kılavuz”u okumanızı tavsiye ederim.

Dikey Uyum

Bir tasarımda yatay uyumun korunmasına benzer şekilde, dikey mesafelerin tutarlı tutulması da önemlidir. Bir elektronik tablodaki satırlar gibi, metni eşit aralıklı aralıklarla tutmanıza yardımcı olurlar.

Bu sıralar ne kadar büyük olmalı? Yine size kalmış. Ancak, 8 piksel veya 8'in katları (16 gibi) kullanmanızı öneririm. Öğelerin veya metnin hizalanacağı sınırları yeniden tanımlayın.

Yazı Tipi Boyutlarını Doğru Şekilde Seçmek

İyi hazırlanmış bazı tasarımlara bakarsanız, yazı tipi boyutlarında tutarlılık göreceksiniz. Bu bir nedenden dolayı.

Not : Tasarımınızda yalnızca iki, belki üç yazı tipine ihtiyacınız olduğunu da unutmayın. Ancak, doğru yazı tiplerini seçmek ve bunların birlikte çalışmasını sağlamak bu eğitimin kapsamı dışındadır.

Proje boyunca kullanmak üzere birkaç temel yazı tipi boyutu tanımlayarak başlayın. (Örneğin, 30, 31 ve 32 piksel kullanmak aptalca olur. Bunun yerine, bu çok benzer üç boyutu tek bir boyutta birleştirin.)

Standart Yazı Tipi Boyutları İki Avantaj Sağlar:

• Tasarımınız daha tutarlı ve daha zarif olacaktır.
• Tasarım sürecini hızlandıracak ve sizi daha verimli hale getirecektir.

Yazı Tipi Boyutları

Yazı tipi boyutlarını tanımlarken boyutları aynı artışlarla büyütmediğinizden emin olun. Metni büyütürken, doğrusal olmamalıdır. Bu, oluşturduğunuz metin ne kadar büyükse, artışın o kadar büyük olması gerektiği anlamına gelir.

Diyelim ki 12 piksel yazı tipi boyutunda bir metin bloğunuz var ve onu büyütmek istiyorsunuz. 14 piksel denersiniz ve memnun kalırsınız. Ama sonra büyük bir başlığınız (40 piksel) olduğunu ve onu büyütmek istediğinizi hayal edin. Boyutu 40'tan 42'ye yalnızca 2 piksel artırır mısınız? Tabii ki değil. Optik olarak, metin çok daha büyük bir değişiklik gerektirir. Size daha büyük 64 piksellik bir başlık vererek 24 piksel artırmanız gerekebilir.

Kısacası, bu, metnin ne kadar büyük olmasını istiyorsanız, o kadar büyük artış kullanmanız gerektiği anlamına gelir. Bu çok basit ilke, yalnızca metin için değil, aynı zamanda düğmelerin boyutu, beyaz boşluk ve diğer her şey için de geçerlidir.

Tipik olarak geometrik bir ilerlemeye dayanır. Yazı tipi ölçeğini gösteren çok kullanışlı bir çizelge:

Bununla birlikte, tipografi için, sonsuza kadar bağlı kalmak isteyeceğiniz yazı tipi boyutlarıyla kanıtlanmış bir ölçek kullanılır. Ölçek 12, 14, 16, 18, 20, 24, 30, 36, 48, 60 ve 72 pikseldir.

Metin Satır Yüksekliği

Tüm yazı tipi boyutlarını tanımladıktan sonra satır aralığına dikkat etmek isteyeceksiniz. Satır yüksekliği için tekrar 4 piksellik artışlar kullanın. Örneğin 16 piksellik metin için satır yüksekliğini 24 piksel olarak ayarlayalım. Metnin daha fazla nefes almasını istiyorsanız, satır yüksekliğini 4 piksel artırarak 28'e çıkarın.

Projenizin Renklerini Tanımlayın

Kaç renk kombinasyonu olduğunu biliyor musunuz? Çok fazla! Renk tonlarını önceden belirlemezseniz çok fazla zaman kaybedersiniz. Kendinizi siyah, beyaz ve diyelim ki mavi ile sınırlayamazsınız. Her renk için başka gölgelere ihtiyacınız olacak ve bunları önceden ayarlamak önemlidir, böylece gölgeler tasarım projeniz boyunca tutarlı olur. Tasarımda kaos yaratmak istemiyoruz. Her renk için 5 ila 10 ton hedefleyin. Her renk için 9 ton tanımlamayı tercih ediyorum.

Renk tonlarına daha yakından bakalım.

Neden Her Rengin 9 Tonu?

• İlk avantaj, renk adlandırmadır. İster grafik düzenleyici, ister CSS kodu kullanıyor olun, bu ipucundan kesinlikle yararlanacaksınız. Her renk tonuna 100, 200, 300, 400, 500, 600, 700, 800 ve 900 gibi bir sayı atanır. (Neden yüzlerce? Tipik olarak, yazı tipi kesimleri de bu şekilde düzenlenir.)

• İkinci olarak, 9 renkleri tanımlamak için kullanışlı bir sayıdır. Bu tonları hazırlamanın en iyi yolu 9 karelik bir sıra hazırlayıp kareleri renklerle doldurmaktır. Ortadaki temel renk olacaktır. Ardından, en açık gölgeyi (en solda) ve en koyu gölgeyi (en sağda) tanımlarsınız. Bir sonraki adım, aradaki tonları seçmektir.

Elementlerin Farklı Boyutlarını, Türlerini ve Durumlarını Hazırlayın

Bir tasarım üzerinde çalışırken genellikle sayısız simge, düğme ve diğer bileşenlerle çalışırsınız. Yine, onlar için önceden birkaç boyut hazırlamak ve seçenekleri mümkün olduğunca azla sınırlamak iyi bir fikirdir. Tasarım sürecinde başka boyutlar eklemeyin ve bileşenlerin boyutunu ihtiyaçlarınıza göre ayarlamaya çalışmayın. Bunun yerine, daha önce tanımladıklarınızı kullanın ve tüm tasarım daha tutarlı ve temiz olacaktır.

Örnek olarak butonlara bakalım. Başladığınızda, hiyerarşik yapılarını tanımlamanız gerekecek. Bunu yapmak için, birincil eylemi olan bir düğme, ikincil eylemi olan bir düğme ve belki de daha az önemli eylemi olan başka bir düğme yapın. Her düğme için durumunu (etkin, etkin değil) ve renk çeşidini belirtin. Her zaman öğelerin sayısını en önemlilerine indirmeye çalışın.

Diğer Elemanların Özelliklerini Tanımlayın

Kullanıcı arabirimi tasarımcıları, tasarım çalışmalarında genellikle gölgeler kullanır. Ancak, daha az deneyimli tasarımcılar için gölgeler bazen bir mücadele olabilir. Bir gölge oluştururken, gölgenin x ekseni ve y ekseni boyunca mesafesini ve ayrıca bulanıklık yarıçapını, rengi ve şeffaflığı ayarlamalısınız. Gölgelere ince ayar yapmak çok zaman alabilir, bu yüzden tasarıma dalmadan önce onları hazırlamak isteyeceksiniz. Bir dizi gölge hazırlamak (renklerle aynı yöntemi kullanarak) ve ardından bunları tasarım süreci boyunca uygulamak yararlıdır.

Ayrıca, üzerinde çalışacağınız öğelerin köşe yarıçapı, saydamlık ve renk gradyanları gibi diğer tüm özelliklerinin de farkında olun.

Beyaz boşluk

Beyaz boşluğu uygun şekilde ayarlamak önemlidir. Öğeleri ister dışarıdan (kenar boşluğu) ister içeriden (dolgu) ofsetleyin, yine sihirli sayı 8'e güvenmelisiniz. Ofseti 8 piksel artırın (küçük öğeler için 4). Yazı tipi boyutunda olduğu gibi, istediğiniz boşluk ne kadar büyükse, artış o kadar büyük olacaktır (yine, bu artışları önceden tanımlamanız gerekir).

Çözüm

Tasarımlarınızı temiz ve tutarlı hale getirmek için bazı sınırlar ve süreç boyunca net bir yol tanımlayın.

Tasarımınızın her bir öğesi üzerinde çalışırken aşağıdakileri aklınızda bulundurun:

• Tasarımınızda zaten bir yerde kullanıp kullanmadığınızı görün. Eğer öyleyse, o elemanı basitçe kopyalayabilirsiniz.
• Yatay ve dikey bir ritim izleyin ve en başta tanımladığınız adımları kullanarak öğelerin boyutunu ayarlayın.
• Piksellerle karmaşık kararlardan ve bitmeyen savaşlardan kaçının. Yerinde bir sistem olsun.
• Aynı öğeyi iki kez oluşturmayın. Tasarımınızda düzen varsa işiniz daha iyi ve verimli olacak, daha hızlı yineleme yapabilecek ve geliştiricilerle daha kolay iletişim kurabileceksiniz. Geliştiriciler, stillerinizi takip eden değişkenler belirleyecektir, bu nedenle bunları net bir şekilde tanımlayın. Temiz bir tasarım elde edeceksiniz ve geliştiriciler daha iyi ve daha sürdürülebilir kodlar oluşturabilecekler. Herkes mutlu olacak.

İlgili Okuma

• Smashing Magazine, Nick Babich, "Yerleşim Izgaraları ile Daha İyi Kullanıcı Arayüzü Tasarımları Oluşturma"
• ""px", "dip", "dp" ve "sp" Arasındaki Fark Nedir?, Yığın Taşması
• "Kullanıcı Arayüzü Tasarımcıları Mobil Uygulamaları Tasarlamak İçin Birim Olarak Neden "piksel" Yerine "dp" Kullanıyor?" Kikahola, Medium
• " font-weight CSS özelliği," Mozilla Developer Network web belgeleri
• “Daha Az Yazı Tipi Kullanarak Tasarım Oyununuzu Hızlandırın,” Jacci Howard Bear, Lifewire
• Anastasia Kaş, Medium “Etmeyen Kullanıcı Arayüzü Gölgeleri Oluşturma”
• “Fontları Birleştirirken Uymanız Gereken 10 Altın Kural: Bir Tasarımcıdan İpuçları,” Janie Kliever , Canva
• "Malzeme Tasarımı: 8 dp Izgara, 4 dp Izgara", Google Yardım
• Reinoud Schuijers, UX Collective, "Neden Bazı Tasarımlar Dağınık Görünüyor, Diğerleri Görünmüyor,"