Series for React Architecture
React Örnek Mimarisi — 7 (Design System Nedir?)
Bu kısımda Web Uygulamalarında oldukça önemli olan bir konuya, Design System (Tasarım Sistemi) ne olduğu üzerine duracağız.
Daha önceki yazılarımdan React Örnek Mimarisi -5 ‘da Figma ve Tasarım yapısı ürünün ilerleme sürecinde nasıl olmalı, mimari ile nasıl uyum sağlamalı konularına değinmiştik.
Kısa bir hatırlatma amacı ile o blog yazısından bir kaç resmi aşağıda listeliyorum.
Projenin ilerleyen süreçlerde (BugFix, Refactoring ve Feature Development) işlemleri sırasında UIX anlamında farkı(diff)Figma’da nasıl tutulması gerektiği ve 2 geliştirme süresi arasındaki farkı nasıl yansıtılabileceğimiz üzerineydi.
Bu yazı da yukarıdaki resimde bulunan kırmızı kısmı analiz etmek ve daha detaylandırmak istiyorum. Aslında bu kısım bir şekilde Sanatçı/Grafiker, UIX tasarımcının görsel ve estetik yetenekleri ile alakalı olsada, biz bu kısmı belli kurallar, örüntüler, yöntemler ve gruplamalar ile anlatabiliriz.
Amacım bu yazıda bu kısmı Design System içerisinde anlatmak. Öncelikle Design System, yani Tasarım Sistemi ne demek ona bir bakalım.
Invision, Salesforce, Atlassian, Google, Apple, Microsoft, Spotify vb bir çok büyük firma, bünyelerinde bir çok uygulama geliştiriyorlar. Marka değeri açısından, aynı yapıları kullanmak için ortak bir UI dilinin olmasını istiyorlar. İşte kullanıcılar ile etkileşime geçecek bu arayüzlerin ortak bir dil olması gerekiyor . Temelde Color, Typography, Sizing and spacing, Imagery ile bir tasarım dili oluşturulması ve bunlar ile bileşen, sayfa ve geçişlerin(animasyonların) tasarım bütünü diyebiliriz.
Peki bu şirketlerin Design Systemleri açık mı ? Evet çoğununki açık ve herkes bu design systemlerine ulaşıp içeriklerini inceleyebilir. Bazılarını aşağıda listeliyorum;
- Apple: https://developer.apple.com/design/
- Google: https://m3.material.io/
- Meta: https://design.facebook.com/
- Atlasian: https://atlassian.design/
- Microsoft: https://www.microsoft.com/design/fluent/
- Salesforce: https://www.lightningdesignsystem.com/
- Airbnb: https://design.facebook.com/
- IBM: https://carbondesignsystem.com/
- Adobe: https://spectrum.adobe.com/
- Shopify: https://polaris.shopify.com/
Bu ve benzeri bir çok firmanın ortak bir Görsel/UI dili oluşturabilmeleri için Design System (Tasarım Sistemleri) oluşturmaları gerekiyor. Hepsi birbirinden bir takım farklılıklar içerse’de temel mantıkları benzer. Bundan dolayı içlerinden bir tanesini seçerek konuyu anlatmaya çalışacağım.
Örnek olarak Adobe’un Tasarım sistemi ele aldım. Daha önceden yazmış olduğum Bileşen odaklı UI Geliştirimi üzerinde bağlantı kurarak anlatmaya çalışacağım.
Tasarım Sistemleri daha altyapısal temel kısımları oluşturuken,
- Princples (Prensipler)
- Foundations (Temel Yapıtaşları), Contents (İçerikler)
- Bileşenler
- Patterns (Örüntüler)
Bileşen odaklı geliştirme olayı Bileşenlerden alarak daha uygulamaya yakın hale getirir.
- Bileşenler
- Molecules
- Templates
- Pages
Bir React Uygulama Mimarisinin bu 2sinin toplamına ihtiyacı vardır. Bugün kü konumuz Tasarım Sistemleri olduğu için konuyu o kapsamda analiz edceğiz.
Adobe (Spectrum)
Adobe geliştirdiği Design System → https://spectrum.adobe.com/ aşağıda bunun ile ilgili parçalar üzerinde duracağım.
A. Prensip (Principles)
Spectrum öncelikle prensipler ile başlıyor. Akılcı, Müşteri odaklı ve ihtiyaçlara odaklanılmış olması gerekiyor. Bunlar nasıl eyleme dönüşecek;
- Tüm platformlar için geçerli olmalı
- Her dilden insan kullanılabilmeli
- Geliştirilebilir olmalı, Bunun yöntemleri açık olmalı
- Topluluk tarafından geliştirilmeli
B. Foundations (Temel Yapıtaşları)
- Design Tokens
- Platform Scale
- Theming, Color
- Typography
- Object Styles
- Motion
- States
- Iconography
- Illustration
- Inclusive Design
- International Design
- Bi-directionality
- Data Visualization
- Layout
1. Design Tokens (Tasarım Belirteçleri, Değişkenleri)
Tasarım belirteçleri, bir tasarım sistemi oluşturmak ve sürdürmek için gereken tüm değerlerdir — aralık, renk, tipografi, nesne stilleri, animasyon vb. Bunlar tasarım tarafından tanımlanan her şeyi temsil edebilir: RGB değeri olarak bir renk, sayı olarak bir opaklık, Bezier koordinatları olarak bir animasyon kolaylığı. Tüm ürün deneyimlerinde esneklik ve bütünlük sağlamak için sabit kodlanmış değerlerin yerine kullanılırlar.
UI görsellerini oluştururken bir çok aralık aralık, renk, tipografi, nesne stilleri, animasyon için değişkenler kullanırız. Burada inanılmaz değer aralıkları bulunur.
Örneğin Renkler konusunda RGB uzayında 256 x 256 x 256 = 16,777,216 renk değişkenine sahip oluruz. Renk Modelleri hakkında daha detaylı bilgi için (Renk Modelleri) blog yazımı okuyun.
Buradaki amacımız Renkleri kullanırken veya diğer değişken oluşturacak yapıları oluştururken kısıtlamamız gerekiyor, aksi halde Uygulamamız’ın içerisinde birbiri ile alakasız çok farklı renk tonları bulunur ki burda görsel ve estetik açıdan, hatta uygulamanızın mimarisel kontrolü açısından zorluklar çıkarır.
Yukarıdaki resimde bunun nasıl kullanılacağını Renk değişkeninin nasıl isimlendirileceği konusunda bir çalışmayı görebilirsiniz. Renk → Renk Değişkenine, Backround Değişkenine → Button Background Değişkenine dönüştürülerek isimlendirilmiştir.
Not: Adobe vb… Tasarım Sistemleri çok genel ve her yere uygun yazmak istediği için bu katman sayısını çok daha fazla artıyor olabilir.. İşinize göre blue-400 seviyesinde de kalabilirsiniz. Veya araya daha fazla katmanlarda ekleyebilirsiniz.
Global Tokens, tasarım dilimizde bağlamdan bağımsız(context-agnostic) isimlerle temsil edilen ilkel değerlerdir. Renk paleti, animasyon, tipografi ve boyut değerlerimizin tümü global belirteçler olarak kaydedilir. Bunlar doğrudan kullanılabilir ve diğer tüm token türleri tarafından miras alınır. (Size Tokens — size16, Color Tokens …blue400 )
Alias Tokens, belirli bir bağlam veya soyutlama ile ilgilidir. Takma adlar, bir belirtecin amaçlanan amacını iletmeye yardımcı olur ve tek bir amacı olan bir değerin birden fazla yerde görüneceği durumlarda etkilidir. (cta-background-color)
Component tokens,bir bileşenle ilişkili her değerin kapsamlı bir temsilidir. Genellikle takma ad belirteçlerinden miras alırlar, ancak mühendislik ekiplerinin bileşen geliştirmede belirteçleri uygularken mümkün olduğunca spesifik olmalarını sağlayacak şekilde adlandırılırlar. (button-cta-background-color)
2. Platform Scale (UI üzerinde Çalışan Platforma Uygun Ölçeklenmesi)
Spectrum birden fazla platform için tasarlanmıştır. İmleç ve dokunma deneyimlerine uyum sağlamak amacıyla kullanıcı arayüzleri için iki farklı ölçek kullanır (masaüstü ölçeği ve mobil ölçek)
Burada bizim ekranların responsive yapmamızın dışında Native uygulamar ile Web Uygulamaları arasında temel farkın görseller dışında etkileşimde olduğunuz bileşenlerin Mouse ile değil Parmaklar ile kontrol ediliyor olmasıdır. Bundan dolayı düğmeler ve bileşenler bulundukları platformlar için farklı ölçeklerde tasarlanmalıdır.
3. Theming
Tema, Spectrum’un kasıtlı ve sistematik bir şekilde özelleştirilmesidir. Benzersiz görsel özelliklere sahiptir.
Tema özellikle Code Editorlerinde bir çok versiyonu olan veya Web sayfasında Light Mode, Dark Mode adı altında tüm görsellerin farklı renk ve font kalıplarına sahip tasarlanmasıdır.
Kendi Dark Theme/Light Theme, vb Theme yapıp bunu uygulamaya nasıl entegre edebileceğiniz konusunda daha önceden yazmış olduğum Dark & Light Theme (Karanlık & Aydınlık Tema) blog yazısını okumanızı öneririm.
4. Color
Spectrum, tasarım sistemi bağlamında renk hakkında konuşmak için bir dizi terim kullanır. Bu kelimeler, ürün tasarımı ve geliştirme topluluklarındaki bazı emsallere kıyasla biraz farklı kullanımlara veya tanımlara sahip olabilir, ancak kasıtlı ve amaçlı olarak seçilmişlerdir. Aşağıdaki terimler, Spectrum renk sisteminin birçok yönünü anlamanın temellerini oluşturur.
Konu hakkında detaylı bilgi edinmek için Renk Modelleri hakkında daha detaylı bilgi için (Renk Modelleri) blog yazımı okuyun.
Color-fundamental linkinde de bir çok faydalı içerik bulunuyor,
- Color themes and modes,
- Contrast-generated colors
- Color gamuts
- Color and visual perception
Ayrıca Color Systems(Renk Sistemleri) , Using Colors(Renk Kullanımları) ve Pallete (Renk Paletleri) konusunda ekstra yazılar bulunuyor. Amacım kabaca Tasarım Sistemlerini anlatmak olduğu için bu detaylara girmiyorum.
5. Typography
Tipografi, deneyimler ve platformlar arasında tutarlılık sağlayan bir tasarım sisteminin önemli bir parçasıdır. İyi tipografi kuralları, içeriğin net ve verimli bir şekilde sunulmasına yardımcı olur.
Tipografi uygulamanızda bulunan bütün metinleri, bileşenler üzerindeki metinlerin stillerini, ağırlıklarını ve türlerini içerir.
Tipografi, yazı dilini okunaklı, okunabilir ve görüntülendiğinde çekici kılmak için yazı düzenleme sanatı ve tekniğidir. Yazı düzeni, yazı tiplerini, nokta boyutlarını(point sizes), çizgi uzunluklarını(line lengths), satır aralığını (letter spacing) ve harf aralığını (izleme) seçmeyi ve harf çiftleri arasındaki boşluğu ayarlamayı (karakter aralığı kerning) içerir. (Wikipedia)
Bu konuyu incelediğim aşağıdaki Fontları React Projesine Nasıl Dahil Ederiz ? blog yazımı okuyabilirsiniz.
- Typography components (Headings, Body, Detail, Code)
- Font Size
- Text Formating (Bold, Italic, Underline, Strong, Emphasis)
- Line Height (Heading Details, Body Code, Component)
6.Object Styles
Spectrum’un odaklanmış doğası nedeniyle, her nesne stili anlamsal bir anlam taşır. Belirli şekiller veya efektler, amacı iletmek veya etkileşim hakkında ipuçları vermek için kullanılır.
Burada Objelerin şekillerini değiştiren Rounding , Border Witdh ve Shadow gibi özelliklerden bahsediliyor.
Rounding yani Border-Radious ile şekillerin çevrelerindeki yuvarlaklıkları ayarlayabilirsiniz.
Border Witdh ile vurgulamak istediğin bileşenleri daha detaylı ve ayrıntılı gösterebilirsin 1px , 2px, 4px
Drop Shadow ile bileşenleri arka planda bulunan bileşenden daha net ayırarak görselliği daha net ve iyi şekilde sağlayabilirsiniz.
7. Motion
Hareket, deneyime anlam ve yaşam duygusu katar. Amaca yönelik, sezgisel ve sorunsuz olmalıdır. Kullanıcıların daha üretken olmalarına yardımcı olmalı ve onları asla yavaşlatmamalıdır.
Motion dediği aslında kullanıcıların UI etkileşimleri sırasında veya UI Elemanlarının haretetleri, şekilde değişikliklerinin doğal olmasını (gerçek hayattaki ne benzer) şekilde olmasını sağlayan Animasyon davranışlarıdır.
Easing yöntemleri ile hareketin ivmeyi oluştursunuz, hızlıdan yavaşa giden bir ivme, veya yavaşyan hızlıya giden bir ivme veya hızlanıp, sonra yavaşlayan ivme türleri, animasyonlar oluşturabilirsiniz.
Duration (süre), bu haraketin ne kadar sürede gerçekleşeceğini tanımlayabilirsiniz. Bu animasyonun/hareketin görsel etkisini değiştirir. Örneğin duration-100, duration-200 …
8. States
States(Durumlar), bir bileşenin veya etkileşimli bir öğenin durumunu veya potansiyelini kullanıcıya iletir.
Bu durumları aşağıdaki şekilde listelenmiştir. Kullanıcı etkileşimde bileşenlerin tüm bu durumlarını düşünmek gerekir.
- Default Mode
- Hover Mode
- Down Mode (Üzerine Basıldığı An)
- Keyboard Focus
- Disabled
- Selected
- Dragged
- Error
9. Iconography
Spektrum ikonları net, minimal ve d platformlar arasında tutarlıdır. Hem metafor hem de stil olarak tasarım sistemimizin odaklanmış ve rasyonel ilkelerini takip ederler
- Characteristics: Icon karakterlerini belirleyen etkenler bulunur, Metaphors, Platform Spesific , Appearenace, Color, Size, Layout, Pixel Snapping, Stroke Width, Corner Radious
- Workflow and UI Icons : Farklı amaçlar ile farklı yerlerde kullanılan ikon türleri bulunur
10. Illustration
İllüstrasyonlar ürünlere benzersiz bir görsel ses katar. Rehberlik etmek, açıklamak ve bilgi ve deneyimleri zenginleştiren bir bağlam eklemek için farklı stiller kullanırlar.
Filled, Outline
11. Inclusive Design
Hepimizin görme, renkleri algılama, duyma, hareketlerimizi kontrol etme, konsantre olma ve kavramları anlama yetenekleri farklıdır. Kapsayıcı tasarım mümkün olduğunca çok sayıda insana yer açar.
12. International Design
Uluslararası tasarımın amacı, küresel kullanıcıların seslerini yükseltmek için dünya genelinde eşit derecede kullanılabilir, ilgili ve anlamlı deneyimler yaratmaktır.
13. Bi-directionality
Genellikle “RTL” (sağdan sola) diller olarak da adlandırılan çift yönlü dillerdeki dijital deneyimler, genellikle arayüzün sağdan sola okuma düzenine uyacak şekilde yansıtılmasını gerektirir.
14. Data Visualization
Veri görselleştirmeleri karmaşık kavramların anlaşılmasını kolaylaştırır. Kullanıcıların verileri keşfetmesine, izlemesine ve açıklamasına yardımcı olabilirler.
15. Layout
Spacing(Aralık değerleri), bileşenler arasındaki ilişkileri açıkça tanımlayarak tutarlı arayüzler oluşturmaya yardımcı olur.
Responsive grid ekranın boyutuna bağlı olarak bir düzenin dinamik olarak değişmesini sağlar. Bu aynı zamanda tutarlı düzenleri garanti eder
Application frame uygulamalar aynı temel yapıyı paylaşmalıdır. Bu, ürünler ve platformlar arasında tutarlı ve tanıdık deneyimleri ve daha kısa bir öğrenme eğrisini garanti eder.
B. Content
İçeriklerin hazırlanmasında tasarım sistemi içerisinde oluşturulabilir. Bu kısım React Mimari Yapısı ile çok ilgili olmadığı için bu kısmı atlıyorum. İsteyen https://spectrum.adobe.com/ altından Content ile ilgili kısımları detaylıca okuyabilir.
C. Components
Bileşenler üzerinde de çok fazla durmayı düşünmüyorum. Çünkü bu bileşenleri bileşen ve chart kütüphanelerinden bahsederken daha detaylı bulabilirsiniz, bir çok bileşen kütüphanesi ve görselleştirme kütüphanesi mevcut ben bazılarını React için aşağıda listeledim.
Component Libs
- Mantine
- Chakra
- Material UI
- PrimeReact
- Bootstrap
- Evergreen
- ArcoDesign
- Geist
- Fluent UI
- Radix
- Reakit
- SemiDesign
- Ant Design
- React Suite
- React Spectrum
- Base Web Design
- Circuit UI
- Next UI
- Semantic UI React
Visualization Libs
- Recharts
- Nivo Rocks
- Visx
- AmCharts
- Cytoscape
- ECharts
- GraphViz
- Google Charts
- MX Graph
Yukarıda da listelediğim gibi birçok UI Bileşen ve Chart kütüphanesi bulunuyor, aşağıda Adobe Spectrum seviyesinde verilmiş bileşenlerden bahsediyor olacağım.
1. Actions
- Button, Link, Menu Item, Action Button, Close Button, Quick Actions, Action Bar, Action Group, Menu, Button Group
2. Containers
- Divider, Tray, Popup, Modal, Drawer
3. Data Visualizations
- Axis, Legend, Area Chart, Bar Chart, Big Number (Stats), Donut Chart, Histogram, Line Chart, Scatter Plot
4. Feedback
- Alert Banner, Alert Dialog, Coach Mark, Color Loupe, Contextual Help, Inline Alert, Toast, Tooltip
5. Inputs
- Checkbox, Checkbox Group, Color Area, Color Slider, Color Wheel, Combobox, Field Label, Help Text, Picker, Radio Group, Rating, Slider, Swatch, SwatchGroup, Switch, TextArea, Textfield
6. Navigation
- Avatar, BreadCrumbs, Scroll-zoom bar, Side Navigation, Tabs, Tags, TreeView
7. Status
- Badge, Meter, Progress Bar, Progress Circle, Status Light
8. Typography
- Heading, Body, Detail, Code
D. Patterns
1. Cards
Kartlar, kullanıcıların ilgili öğeler ve eylemlerden oluşan bir koleksiyona göz atmasını sağlamak için bilgileri esnek kaplarda gruplandırır. Bilgilerin bir kısmını gösterirler ve etkileşim üzerine daha fazla ayrıntı ortaya çıkarırlar.
2. Form Errors
Form hataları, sistem geçersiz girdilerle karşılaştığında ortaya çıkar ve çözülene kadar devam eder. Sorumlu form tasarımı, kullanıcılara gerekli girdi kriterlerini karşılamak amacıyla hataları düzeltmeleri için bağlamsal ve ilgili bilgiler sunar.
3. Table
Tablolar, bilgileri görüntülemek için kullanılan kaplardır. Kullanıcıların büyük miktarda veriyi hızlı bir şekilde taramasına, sıralamasına, karşılaştırmasına ve işlem yapmasına olanak tanırlar.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki(react-mimarisi) diğer yazılara erişmek için bu linke tıklayabilirsiniz.
