Bir tasarım sistemi talebiyle başladı. Tasarım sistemi ekibimizden mevcut düğme bileşenimize daha büyük bir boyut seçeneği eklemesi istendi. Diğer boyutlara baktıktan sonra, başka bir boyut tahmininde bulunabilirdik, ancak bu beni meraklandırdı… "Tasarım sistemimizde tüm bileşen boyutları nasıl karşılaştırılır? Boyutlandırma için uymamız gereken evrensel kurallar var mı?”

Maalesef cevap hayırdı. Bazı değerler ortaktı, ancak hiçbiri tutarlı değildi. Sistemimizde tutarlı boyutlandırma, aralık ve ölçeklendirme sağlamaya yardımcı olacak hiçbir kural yoktu.

Temel bilgilere geri dönmek

Harika tasarım, genellikle temelleri doğru bir şekilde elde etmekten kaynaklanır. Birçok tasarımcı için (benim gibi) tipografi, tasarımın en önemli temel öğesidir. Ortak oranlara ve yöntemlere dayalı olarak ölçeklenen orantılı tasarımları nasıl oluşturabileceğimizi görmek için tip ölçeğimize baktık.

Proportio Tanıtımı

Proportio, orantılı tasarım sisteminin temellerini oluşturmak için tasarımcılara yönelik bir web uygulamasıdır. Tipografik ölçekleri ve bunların simgelere, boyutlandırmaya, aralığa ve bir bileşenin bileşimine nasıl uygulanabileceğini keşfedebilirsiniz. Orantılı bir tasarım sistemi ile bileşen boyutları ve yoğunlukları çocuk oyuncağıdır.

Temel sistemler oluşturma

Sisteminizin geri kalanının çoğu için kullanılacak olan tür ölçeğinizi tanımlayarak başlarsınız. Küçük bir üçüncü (1:1.125) gibi bir ölçek faktörü ile birlikte bir temel yazı tipi boyutu kullanılır. Diğer tüm yazı tipi boyutları bu orana dayalıdır.

Tipografi ve simge eşleştirme, tasarım sistemlerinde yaygın ve önemli bir öğe olduğundan, simgeler, tür ölçeğine göre otomatik olarak boyutlandırılır.

Metin-simge aralığı da tür ölçeğine bağlı olarak orantılıdır. Bu, aralarındaki mesafenin göreceli ve dengeli olmasını sağlar. Benzer şekilde orantılı boyutlandırma ölçekleri, yarıçap ölçekleri ve hatta yükseklik (alt gölge) ölçekleri oluşturabilirsiniz.

bileşen sistemi

İşte burada işler gerçekten ilginçleşiyor.

Temel sistemlerimize sahip olduğunuzda, bileşen dolgumuzu ve yüksekliklerimizi boyutlandırmak için tip ölçeğimizi veya boşluk ölçeğimizi kullanmayı seçebilirsiniz. Temel (varsayılan) boyutlu bileşen, temel tür boyutunuzu kullanır (varsayılan olarak 16 piksel).

Seçtiğiniz ölçeklerdeki artışlara göre kullanıcı arayüzünde oluşturulan daha küçük ve daha büyük boyutlar ekleyebilirsiniz.

Ayrıca az ya da çok yoğun seçenekler de ekleyebilirsiniz. Yoğunluk, boyut gibidir, ancak yalnızca bileşenin dolgusunu ve yüksekliğini etkiler — metin ve simge boyutları aynı kalır. Bunlar ayrıca ölçeklerinize göre oluşturulur ve yoğunluklarınızın büyüme veya küçülme hızını değiştirebilirsiniz.

Yalnızca metin, yalnızca bir simge veya her ikisi birden olduğunda bileşeninizin nasıl göründüğünü görmek için bileşen görünümünü açıp kapatabilirsiniz. Bileşenin özelliklerini göstermek için bir görünümü de değiştirebilirsiniz.

konteyner sistemi

Tıpkı bileşen sistemi gibi, Proportio da orantılı olarak ölçeklenmiş kaplar oluşturmanıza olanak tanır.

Örneğin, bir popover küçük bir kap (küçük köşe yarıçapı ve dolgu) olabilir. Kartlar gibi daha büyük kaplar, daha büyük bir köşe yarıçapına ve dolguya sahip olabilir. Modal iletişim kutuları daha da büyük kaplar olarak kabul edilebilir ve bir arabirim sisteminde uygun görünmesi için en fazla dolguya ve en büyük köşe yarıçapına ihtiyaç duyar.

Aynı orantılı sistemleri kullanarak, ölçeklendirilmiş dolgu, ölçeklenmiş yarıçap ve hatta yükseklik (gerekirse) içeren kaplar oluşturabilirsiniz.

Değerleri dışa aktarma

Kullanmak istediğiniz bir sistem oluşturduktan sonra, bunlar Tasarım Simgeleri (W3C taslak biçimi) veya CSS değişkenleri olarak dışa aktarılabilir. Bu, sisteminizi mühendislere devretmeyi kolaylaştırır.

Şu anda, bu değerleri doğrudan Figma'ya çekmenin bir yolu yok . Dolayısıyla, mevcut haliyle, gerçek bir “tasarım aracı” olmaktansa, sisteminizde kullanmak istediklerinizi tanımlayan bir prototip olarak daha kullanışlıdır. Ancak bununla birlikte, Proportio açık kaynaklı bir araç olduğu için bu özellik eklenebilir .

Açık kaynak

Proportio açık kaynaklı bir projedir . Hepimizin birlikte büyüyebilmesi için yeni fikirlerin paylaşılmasına veya teşvik edilmesine yardımcı olmak için tasarım sistemleri topluluğuna geri vermeye büyük bir inancım var.

Araç henüz başlangıç ​​aşamasındadır, ancak tasarım ve geliştirme için Proportio'dan en iyi şekilde yararlanmanıza yardımcı olacak ek özellikler üzerinde çalışılmaktadır.