Flalingo

Design System
Project Overview
Sitenin ve sistemin istikrar, devamlılık ve tutarlılığını sağlamak, yeni katılacak geliştirmecilere rehberlik etmek amacıyla marka değerini de devam ettirecek renk, font, tasarım detayları, temel komponentlerin yerleşim, mesafe vb. özelliklerinin gösterildiği tasarım sistemi, tasarım dokümantasyonu oluşturulması.
My Contributions
Tasarım sistemi nedir, nasıl oluşturulur, var olan, belli bir trafiği ve kullanıcısı bulunan ürünlerde tasarım sistemi süreci ile ilgili içerik tüketmeye başladım. Genel yapıyı Domestika platformu üzerinde bulduğum ve Tmlab Tasarım Topluluğunda tavsiye edilen kurs rehberiğinde tek tasarımcı olarak sistemi oluşturmaya çalıştım.
Font

Font seçiminde markanın samimi ve sade görünmesi adına round font seçmeye karar verdim. Başlıklarda sans olmak üzere "Nunito"da karar kıldım.
Performansı düşürmemesi adına çoklu font seçiminden kaçındım, font-weight noktasında da çeşitliliği olabildiğince azalttım.

Color

Marka renkleri ikili idi, "primary" ve "secondary" olarak ayırdık ve bu renkleri butonlarda ve text link uygulamalarında primary, başlıklarda secondary kullanacak şekilde belirledik.

Metinler için #282828 ile #818181 kullandım. Dark ve medium olarak temel ayrıma ek olarak light da ekledim. Aslında bu sınıflandırma "neutral" renklerin içinde de yer alıyor.

Sonra sırasıyla "buttons" ve farklı senaryolardaki görünümleri (states), "cards" yapısı, tek-çift "items" ve "icon" seçimleri sistematize edildi. İkonlar seçilirken performans iyileştirmesi amacıyla zaten kullanılmakta olan Bootstrap5 kütüphanesinin ikonları tercih edildi.

Devamında kullanıcının yolculuğunda karşılaşabileceği "dialog" kutuları, "input fields" ve olası "empty states" senaryoları için geliştirmeler yapıldı.

Sonuç

Consistency olarak geçen ve uzun dönemli ürünlerin aynı brand imajını sürdürmesi, tahmin edilebilir istikrarlı geliştirmelerin rehberliğini sağlayan tasarım sisteminin oluşturulması gayret ve tecrübe gerektiren bir süreç.
Style guide çalışmasından hallice olan yukarıdaki çıktılarımın ilk denemem ve deneyimim olması açısından geliştirmeye açık olduğu net.
Olası tüm senaryoların düşünülüp Atomic Design yaklaşımıyla lego gibi birleştirilebilir ve öngörülebilir temel ilkelerin gösterilmesidir tasarım sistemi. Artık tasarım bakış açısının çok ötesinde topluluk oluşturmaya, birlikte büyümeye odaklanmış global markaların vazgeçilmezi haline gelmiş, büyük bütçelerle oluşturulan ve sürekli güncellenen ayrı bir alan haline gelmiştir ve çok güzel, ilham veren örnekleri mevcuttur. Material Design,
Apple Human Inteface Guideline,
Uber Design System,
Atlassian DS,
Shopify Polaris DS.

For chat!

Thank you! I'll be in touch as soon as possible.
Oops! Something went wrong while submitting the form.