Tasarım Prensipleri
Tasarım bir kültür mirasıdır. Bu miras, gelecekteki çalışanlara örnek olması için kurallar bütünü ile korunur.
İçerik
02
Figma
Yakında
Figma’nın ayarlarını ortak yaptığınızda sanki kendi bilgisayarınızdaymışsınız gibi kullanılmasını sağlar.
Nudge amount (Dürtme miktarı) ayarı küçük 1px büyük 8px olacak şekilde güncelleyin
02
Dosya Düzeni
Taslak
Tasarım dokümanlarını ve layer isimlendirmesini öğrenin. Alt çizgi kullanarak kelimelerin keşfedilmesini ve okunabilirliğini arttırın.
System_Profile_Settings_Custom_Fields
Yap
system-profile-settings-custom-fields
System Profile-Settings Custom-Fields
SystemCustomFields
Yapma
02
—
A
Dosya isimlendirmesi
Dosya isimlendirmesi ingilizce ve Title Case formatında olmalıdır.
ÖRNEK METİN
Payroll
FIGMA FILE NAME
Payroll_Web.fig
Bordro sayfalarını kapsayan bir iş akışına ait ekranlara yer verilir.
02
—
B
Layer isimlendirmesi
Katman isimlendirmesi ingilizce ve Title Case formatında olmalıdır. Figmanın yapay zekası kullanılabilir. Layer isimlendirmesi bileşenler için zorunlu, tasarım dokümanı için opsiyoneldir.
HATALI İSİMLENDİRME
Frame81466
LAYER NAME
Accordion_Item
Accordion bileşeni içindeki bir öğeyi temsil eder.
02
—
D
Yeni dosya
Kapaklar bize dosya hakkında genel bilgi verir. Bu nedenle açık ve net metin içermelidir.
Dosya kapakları işin en özet açıklaması için kullanılır. Projenin ne olduğunu, tasarımcısının kim olduğunu, JiraID’sini veya dokümanın bir kütüphane olup/olmadığını anlamamızı sağlar. Yeni bir figma dokümanı açtığınızda ilk sayfası “Cover” olarak adlandırın ve bileşen arama ile “File Cover”ı kullanın.
Shift
I
File Cover
UI
Süreçlerin ve arayüz elementlerinin sayfa oluşturması için kullanılır.
Subheading
Heading
UI
Library
Bileşenlerin bulunduğu sayfalar için kullanılır.
Subheading
Heading
LIBRARY
Moodboard
Olgunlaşmamış fikirlerin (low-fi) veya white-label geliştirilen projeler için kullanılır
Subheading
Heading
Moodboard
Presentation
Ekipler veya C-level’lar için sunum hazırlanıldığında kullanılır.
Subheading
Heading
Scheme
PDF, Excel gibi çıktı içeren, matbaa süreçlerine girebilecek tasarımlar için kullanılır. Ör: Görsel içeren PDF Rapolar
Subheading
Heading
Dokümana uygun kapağı Cover sayfasına ekledikten sonra “File cover” bileşenini “Frame” içine alın. Bu Frame’i seçip Set as thumbnail (sağ tık ile) seçeneğine basın. Hepsi bu kadar.
Proje kapağını güncellemek isterseniz önce Restore Default thumbnail ile proje kapağını silin, ardından tekrar Set as thumbnail’i tekrar seçin.
02
—
D
Breakpoint
Kırılma noktaları destek verdiğimiz sınırlardır. 12’li grid sistemi ile çalışırız. Daha fazla bilgi için Varlık → Grid sayfasına bakın.
Büyük masaüstü
1512px
Varsayılan
Macbook Pro 16”
masaüstü
1200px
Macbook Air 13.3”
TABLET
1024px
iPad
MOBİL
>1024px
iPhone and Android One
02
İkon ve İllüstrasyonlar
Yakında
Tutarlı görsel elementler üretmek için bu kuralları öğrenin
Detaylar gelecek...
04
Görsel Dil
Yakında
Tasarım dokümanlarını ve layer isimlendirmesini öğrenin. Alt çizgi kullanarak kelimelerin keşfedilmesini ve okunabilirliğini arttırın.
System_Profile_Settings_Custom_Fields
Do
system-profile-settings-custom-fields
System Profile-Settings Custom-Fields
SystemCustomFields
Don’t
03
—
A
File Naming
EXAMPLE
Payroll
FIGMA FILE NAME
Project Name
To create a future where every business maximizes their potential.
04
Tasarım İncelemesi
Taslak
UX projelerinde en sık karşılaşılan paydaş itirazları ve bunlara verilebilecek hazır, profesyonel ve çatışma yaratmayan cevaplar yer almaktadır. Bu bir “laf yetiştirme” listesi değil; itirazı kişisel olmaktan çıkarıp hedef, risk ve değer eksenine taşıyan bir UX iletişim playbook’udur. Daha fazla bilgi alın
04
Yer Tutucu Metinler
Taslak
Ekran tasarımı aşamasında metinlere veya görsellere ihtiyaç duyarız. Bu geçici veriler, uygulamanın son halinin nasıl görüneceğini planlamak ve test etmek için kullanılır.
Tasarımın tutarlılığı ekibin uyumlu metinler üretmesiyle mümkün olur. Birden fazla ekiplere ait çıktıların birleştiği durumları düşünerek metin tutarlılığını sağlayın. Örnek; AppStore için görseller oluşturacaksınız ve birden fazla kullanıcı akışından görsel örnekler topladınız. Hepsinde farklı isim, farklı avatar ve farklı metinler olsun istemeyiz.
06
—
A
Personalar
Canan Su Demirtaş
37
HR Coordinator
Elif Nur Yılmaz
61
HR Generalist
Ayşe Deniz Kaya
48
Finance Manager
Mehmet Ali Demir
29
Account Manager
Zeynep Ece Güneş
30
Payroll Clerk
Emre Can Arslan
42
Finance Specialist
Selin Ada Kurt
31
Account Executive
Burak Efe Şahin
59
Payroll Manager
Defne Aslı Yücel
26
HR Director
Kaan Cem Özkan
33
Finance Director
Irmak Lara Türk
49
Account Director
Oğuzhan Yiğit Yıldız
52
Payroll Analyst
Gülce Naz Aksoy
38
HR Business Partner
Barış Ata Duran
44
Finance Analyst
Ahmet Mahmut Mollahüseyinoğlu
63
Payroll Specialist
06
—
B
En uç durumlar / Edge Case’ler
Bir yazılım, sistem veya algoritmanın normal, beklenen veya tipik çalışma aralığının en uç noktalarında (minimum veya maksimum değerler, sıfır gibi özel koşullar, liste boşlukları vb.) ortaya çıkan bir durum veya sorundur. Bu gibi durumlarda kullanmanız ve bilmeniz gerekenleri öğrenin.
Persona
İsim gibi alanlarda aşağıdaki persona işinizi görecektir.
AD SOYAD
Ahmet Mahmut Mollahüseyinoğlu
KISALTMASI
Ahmet M. Mollahüseyinoğlu
Adres
Mesa Koz Sahrayıcedit Mah. Atatürk Cad. N:69 K:5 D:81 Kadıköy / İstanbul / Türkiye
