Design System qurarkən nələri öyrəndim?
Gəlin hər şeydən əvvəl Design system və UI kit-in fərqini müəyyənləşdirək. Çünki bəzən bu iki anlayışı qarışdırırlar.
Design system — rəqəmsal məhsulun mərkəzləşdirilmiş məlumat kitabxanasıdır. Onun vasitəsi ilə təkralanan komponentlər kod tərəfindən çağırılır və nəticədə yeni kod yazmağa ehtiyac qalmır. Yaxşı hazırlanmış Design sistem atom və molekullardan ibarət olmalıdır. Atomlar dedikdə dizayn sitemin xırda hissələri nəzərdə tutulur. Məsələn, border radius, rəng və digər sadə prinsiplər. Molekullar isə atomlardan ibarət olan asssetlərdi. Məsələn, inputlar, title-lar və buttonlar.
UI kit isə yalnız vizual tərəfə köklənmiş komponentlər toplusudur, koda və ya real məlumata əsaslanmır. Design system ilə müqaisədə UI kit canlı deyil. Design system daha xırda elementləri də özündə birləşdirir. UI kit isə əsasən dizaynerə tez bir zamanda wireframe hazırlamaq imkanı verir.
Məhsula uyğun design system
Design system qurarkən, sözsüz ki öncə dünya miqyaslı məhsulların təcrübəsi ilə tanış oldum. Apardığım araşdırmadan anladım ki, istənilən Design system məhsula və müştəriyə bağlı olmalıdır. Ola bilsin ki, bu cümlə ilk baxışdan çox aydın görünür, amma necə deyərlər şeytan detallardadır. Bank sektorunda məhsuldan məhsula (məsələn, kart sifarişi və kredit alınması) müştərinin personası az da olsa fərqliliklər olur və bu nəinki ümumi dizayn patternlərə, hətta copywriting-ə belə təsir edə bilər. Ancaq daha əvvəl də qeyd etdiyim kimi, Design system-in komponentləri ümumiləşməlidir ki, dizayn və front-end komandası eyni dalğada ola bilsinlər.
İlk mərhələdə bankın cari məhsullarına bir-bir baxış keçirtdim və ümumi sistemə uyğunlaşmayan komponentlərin siyahısını çıxartdım. Hətta bu məhsul review-su sayəsində bəzi hissələri yeni komponentsiz belə dizayn komandası daxilində unifikasiya edə bildik.
İkinci mərhələdə isə siyahısı çıxarılmış komponentlərin yeni vizual tərəfini hazırladım və hazırlayarkən nələri öyrəndim:
- Accessibility barədə öncədən düşünün. Lazım olan tool vasitəsi ilə göstəriciləri ölçün və front-end komandası ilə məslətləşin.
- Komponentlərin bütün vəziyyətlərini (state) hazırlayın, bunu sonraya saxlamayın. Çünki Front-end komandası bu işi bir dəfəyə görür və hissə-hissə onlara təqdim etməyiniz işi yubada bilər.
- Bir komponenti hazırlayarkən, onun digər komponentlər ilə uyğunlaşmasını yoxlayın. Məsələn, chips hazırlayırsınızsa, onun inputun daxilində tag kimi işlənəcəyini nəzərə alın. Bunu öncədən nəzərə almamısınızsa, ehtimal var ki, chips inputa sığmasın.
- Məsafələr barədə düşünün, layout-u unutmayın..
- Bir baza ölçü seçin (4px, 5px, 8px) və bütün işlərinizi ona arxalanaraq qurun.
- Rənglərdən düzgün istifadə edin. Əminliklə deyə bilərəm ki, müştəriniz qırmızı rəngi neqativ kimi qəbul edir, baxmayaraq ki, brendinizin əsas rəngi qırmızıdır
- Şriftlərə fikir verin, ölçü sistemini (title, subtitle, body) qurun və ölçüləri REM ilə verin. Front-end komanda canınıza dua oxuyacaq
- Table qurarkən maksimum rahat olmasına fikir verin
- Hər komponentin dokumentasiyasını ətraflı yazın. Necə istifadə etmək olar, necə istifadəsi doğru deyil və hansı prinsiplər əsasında qurulub.
Dizayn komandasının dizayn sistem ilə dostluğu
Dizayn komandasının digər üzvləri hazırlanmış sistemə onların yaradıcılığını məhdudlaşdıracağını düşünərək şübhə ilə yanaşa bilərlər. Ancaq dizayn boşluqlarını aradan qaldırmaq və Frontend komandasından geri qalmamaq üçün mən dizayn komandamıza hər şeydən əvvəl bir-neçə komponent təqdim etdim. Onları inputlar və buttonlar-la tanış etdim, ümumi qaydalarla bağlı məlumat verdim.
Dizaynerləri Design system-dən istifadə etməyə cəlb etmək Design systemi yaratmaq qədər çətin ola bilər. Buna görə də mənhər bir komanda üzvü ilə ayrıca söhbətlər təşkil edərək, onların fikirlərini aldım, iş prinsipləri ilə tanış oldum.
Design system quran şəxs buna bir məhsul kimi yanaşmalıdır. Bu halda sizin müştəriniz Dizayn və Front-end komandalarıdır. Design system məhsul kimi rahat olsun deyə onu avtomatlaşdırmaq lazımdır. Figma bir alət kimi bu imkanı tam olaraq verir. Proseslər avtomatlaşdırmaq üçün Figma-nın Auto Layout funksiyasından mütləq istifadə edin. Bununla yanaşı Variants funksiyasından da istifadə etməyinizi tövsiyə edirəm.
Növbəti hədəflərim
Aydın məsələdir ki, Design System getdikcə daha da böyüyəcək və onu idarə olunması üçün daha geniş komandaya ehtiyac yaranacaq. Hələlik, bu işdə Design komandasının bir üzvünü prosesə cəlb etmişəm, ancaq gələcəkdə həm Design komandasının digər üzvlərini, həm də Front-end komandasını təşəbbüs göstərməyə təşviq edəcəyəm.
P.S.
Digər maraqlı xəbərləri və məqalələri design komandamızın telegram kanalında oxuya bilərsiz : https://t.me/pashabankdesign
