Aurora Tasarım Çantası

Dec 07 2022

Bildiğiniz gibi, farklı zamanlarda gelişen ve karmaşık projelerin oluşturulmasında birkaç tasarımcı yer alabilir. Birinin projesi üzerinde çalışmaya devam ederken kullanımları için organize bir öğeler ve kurallar sistemi kullanmak çok uygundur.

Bu tam olarak projelerimizden biri olan Aurora için gerekli olan yöntemdi. Görevimiz, onlardan e-ticaret yönetimi alanında bir platform için tam teşekküllü bir arayüz oluşturmak için temel unsurlardan oluşan bir konsept oluşturmaktı.

Müşteri örnek olarak Design-Kit, renkler, yazı tipleri, kullanım durumları ve daha fazlasını içeren Carbon sistemini sağladı. Ürünlerinin bir analogunun yanı sıra. Ek olarak, web siteleri geliştirmede yararlı olabilecek bileşen seçeneklerine sahip olduğundan Materyal Tasarım örneklerine odaklandım.
Çalışmalar sırasında öncelikle projenin yazı tipleri, simgeleri ve ana renkleri önerildi. Aynı zamanda, seçilen yazı tiplerinin ve simgelerin birbirleriyle nasıl etkileşime girdiğini göstermek için örnek düğmeler ve girişler oluşturdum. Müşteri buna dayanarak simgelerin yazı tiplerini, renklerini ve görünümünü seçti. Bu nedenle logo renklerinden biri olan pembe Ana renk olarak, ikincisi olan gri ise İkincil renk olarak kullanılmıştır.

İşaretlenmiş rollere sahip kullanılan tüm yazı tipi stilleri, Figma projesinin stillerine kaydedilir ve listeden seçilebilir.

Renkler benzer şekilde korunur. Ancak Renk Stilleri bölümünde klasörlere ayrılırlar: Birincil ve Ek. Renk paletini genişletmek için seçilen renge sırasıyla farklı oranlarda (%20, %40, %60 vb.) siyah ve beyaz ekleme yöntemini kullandım. Renk düzenine sahip çerçeve, amaçlanan renk rollerini de gösterir.

Ayrıca, müşteri tarafından sunulan hazır bir set arasından seçim yapmak için birkaç gölge seçeneği eklendi.

Ardından düğmelerin, girişlerin, açılır listenin ve dil seçim düğmesinin görünümü seçildi. Tüm düğmeler, amaca bağlı olarak görünümü doğrudan projede değiştirilebilen bileşenlerdir. Düğmedeki simge, Otomatik Düzen menüsünden de değiştirilebilir.

Örnek Oturum Açma sayfasını oluşturduktan sonra dili seçmek için açılan düğmenin görünümü biraz değişti (daha kompakt hale geldi).

Girişin 9 seçeneği vardır ve simgeli veya simgesiz olarak kullanılabilir. Parola giriş alanı, farklı durumlarda kullanılabilmesi ve kendine özgü özellikleri olması nedeniyle daha fazla seçeneğe sahiptir. Örneğin, kullanıcı gerekli sayıda karakter girdiyse parolanın gücünü ve yeşil renkle vurgulanan öğeleri gösteren bir ölçek. Ayrıca doğrulama kodu giriş alanı için ayrı bir bileşen yaptım.

Daha sonra, metin içeren aynı öğeler için bileşenlerin yanı sıra onay kutusu ve geçiş için bileşenler oluşturuldu. Ayrıca, farklı boyutlarda avatarlar, gruplu bileşenler, araç ipuçları ve kullanım örnekleri ile birlikte bir açılır liste ekledim.

Öğelerin ve metnin gerçek hayatta nasıl çalıştığını göstermek için müşterinin isteklerini dikkate alarak oturum açma ekranları oluşturdum. Daha sonra ayrı bileşenler oluşturduğum karanlık bir tema eklendi.

Karanlık temanın bileşenlerini ayarlamak için hazır bir giriş düzeni kullandım ve uygun renk ve şeffaflık kombinasyonlarını seçtim. Bazı unsurlar için hiçbir şeyin değiştirilmesi gerekmiyordu. Örneğin, Birincil düğmesi için.

Böylece, oldukça kısa bir süre içinde müşteri, Figma'daki öğeleri düzenleme yeteneğine sahip basit bir UI kiti alır. Bu, çok fazla para harcamadan bir projenin ana stilistik odağını sergilemenin harika bir yoludur.