Kiçik bir komanda ilə bir dizayn sistemi belə qurursunuz

Chris Gilleard tərəfindən təsvir

Dünən gecə kiçik komandamla bir az şəbəkə qurmağa və dizayn sistemlərini öyrənməyə çıxdıq. 2017-ci ilin sözcüsü olduğundan, özümüzün özümüzü necə yaratmağı öyrənmək istəyirdik.

Bir dizayn sistemi yaratmağın bütün faydalarını eşitdik: vaxta qənaət, mübahisələrin azaldılması, əməkdaşlıq, övladlığa götürmə və daha çox şey. Heyecanlandim!

Təqdimatların hamısı bir dizayn sisteminin yaradılması ilə bağlı idi. Bununla birlikdə bunlar böyük komandalardı və ya dizayn sistemini qurmaq və qorumaq üçün ayrılmış bir qaynaq, hətta bir DesignOps komandası (2017-ci ildən bəri 2-ci söz) idi.

Axşamın sonunda biraz ruhdan düşdük. Ancaq biz tək deyildik. Sual-cavab sessiyası zamanı çoxları soruşdu:

"Tək bir dizayner olaraq necə bir dizayn sistemi yarada bilərəm?"

"Mən yeganə dizaynerəm, mənim üçün hansı məsləhətiniz var?"

Ancaq komandamla mən qərar verdik ki, bunun bizi dayandırmasına imkan verməyəcəyik. Hələ öz dizayn sistemimizi inkişaf etdirəcəyik. Buna başlamazdan əvvəl bir neçə məlumat var.

Bir dizayn sistemi nədir?

"Dizayn sistemi, məhsul qəbulunu daha təsirli və bir araya gətirmək üçün sənəd və dizayn vasitələri kimi bir şəxs, komanda və ya cəmiyyət tərəfindən sənədləşdirilən və paylaşılan vizual üslublar, komponentlər və digər narahatlıqlar kitabxanasını təmin edir." - Nathan Curtis

Sadə dillə desək, bir dizayn sistemi bütün məhsulları bir-birinə bağlamaq üçün istifadə olunan təkrar istifadə edilə bilən komponentlərin toplusudur.

Bir çox insan dizayn sistemləri haqqında geniş məqalələr və kitablar yazmışdır. Faydalı tapa biləcəyiniz bəzi şeylər:

Stil Bələdçisi ilə Dizayn sistemi

Mükəmməl düşünə bilərsən, ancaq bu yalnız bir stil bələdçisi deyilmi?

“Stil bələdçisi dizayn prosesinin bir əsəridir. Bir dizayn sistemi, ekosistemə xidmət edən bir yol xəritəsi və bir yığma ilə yaşayan, maliyyələşdirilən bir məhsuldur. ”- Nathan Curtis

Bundan əlavə, bir tikinti sistemi sonsuz sayda daha böyük komponentdə birləşdirilə bilən bir sıra fərqli ölçülü komponentlərdən (və ya molekullardan) ibarətdir. Brad Frostun Atom Dizaynı, komponent dizaynı üçün ilhamdır.

Bir dizayn sisteminin üstünlükləri

“Bu gün qarşılaşdığımız çətinlik alətlərin çox yaxşı ünsiyyət qurmaması, detalların boşluqlardan keçməsi, dizayn və inşaat arasında böyük bir boşluq olması və bacardığımızdan əmin olmaq üçün çox sayda əl işi etməliyik. həmişə hər şeyin üzərindədir. ”- UX Bootcamp

B2B müəssisə proqramı üzərində işləyən kiçik bir komanda olaraq məhdud vaxt, büdcə və resurslarla dizayn sistemi inkişaf etdirməyə çalışdıq. Faydaları komandamıza xatırlatmaq istədim.

Ümumiyyətlə, komandamız vaxta qənaət edərdi, çünki:

  • Azaldılmış mübahisə - Eyni komponent üçün dizayn qərarlarını yenidən nəzərdən keçirməyə vaxt sərf etmək lazım deyil
  • Ölçeklemeye imkan verən təkrar istifadə edilə bilən komponentlər
  • Təkmilləşdirilmiş Əməkdaşlıq - Uzaqdan və fərqli ofislərdə işi təkmilləşdirin

Bir dizayn sistemi qurmaq istəməyim üçün eqoist bir səbəbim var idi. Tez bir zamanda başa düşdüm ki, bacarsaq, bir çox tapşırığı “avtomatlaşdıra” bilərik, sevdiyim bir şey etmək və istifadəçi problemlərini həll etmək üçün bizə vaxt verə bilərik! UX-in əsasını təşkil edir.

Sistem quruluşunu dizayn edin

Bir dizayn sistemi yaratmaq üçün onu söküb hissələrini anlamalıyıq:

UX Pin - Dizayn Sistemi

Bir az da ruh axtarır. Bir dizayn sistemi yaratarkən veriləcək bəzi suallar:

  • Sistem bu gün və gələcəkdə necə işləyir?
  • Vizyonumuz nədir
  • Hansı problemləri həll etməyə çalışırıq?
  • Bu problem kimdən daha çox təsirlənir?
  • Bir dizayn sistemi iş yolumuza necə təsir göstərməlidir?

Başqaları bunu necə sınayır:

Kiçik komandamız bir dizayn sistemi necə yarada bilər?

Kifayət qədər resurs, vaxt və büdcə olmadığında haradan başlayırsınız?

1. Sıfırdan başlamayın

"Alma tortunu sıfırdan hazırlamaq istəyirsinizsə, əvvəlcə kainatı icad etməlisiniz." - Carl Sagan

Ekibimiz mövcud inşaat sistemlərini açıq havada nəzərdən keçirir ki, bunu edə bilək - Austin Kleon deyir:

Kimi çalın və sənətkar - Austin Kleon

Bir çox şirkət dizayn sistemlərini yayımladı və hətta eskiz sənədlərini paylaşdı. Aşağıda bir siyahı paylaşdım. Bu fakt və digər bir çox eskiz mənbələri, eskizdən seçim vasitəmiz kimi istifadə etməyi asanlaşdırır.

Bundan əlavə, tikinti sisteminizi tez bir zamanda hazırlamaq üçün istifadə edə biləcəyiniz vasitələr var:

2. Nə işlədiyini bil

Bütün yerlərimizə və mülklərimizə bir UI yoxlamasının edilməsinin vacib olduğuna qərar verdik. Bunun reallaşması üçün bir neçə lütf əldə etməli ola bilərik. Ancaq hər şey əlinizdə olanları sənədləşdirməklə əlaqəli olduğundan, başqalarından kömək almaq o qədər də çətin olmaya bilər. Bu çox vaxt aparacaq, amma sonunda buna dəyər. Yeni komponentlər yaradarkən bütöv dizayn edə bilərik.

Bu, UI yoxlamasının necə aparılacağını öyrənməkdə faydalı ola bilər:

3. Getdiyiniz kimi qurun

Dizayn sistemi canlı sənəddir. İşin heç vaxt bitmədiyini başa düşdük, zaman keçdikcə sıçrayıb qurmağa qərar verdik. Layihələrimizdə iterativ olaraq işləyərkən, komponentləri nəzərə alaraq dizayn edəcəyik və nəticədə bir tikinti sistemimiz olacaq. Xoşbəxtlikdən, aramızda bir yerdə işləməyə və bir-birimizdən "oğurlamağa" imkan verənlər var.

Qısa ipucu: Sketch-də simvollar yaradın. Bilirəm ki, bu çox vaxt aparır, amma simvolların gücünü gördükdə köhnə deyimi qiymətləndirəcəksiniz:

"Tez getmək üçün yavaş getməlisən."

4. Həddinizi bilin

Kiçik başlayın.

Bəzi dizayn sistemlərində kod parçaları var. Bu, müəssisə daxilində övladlığa götürməyi artırdığı və ardıcıl bir istifadəçi təcrübəsi yaratdığından son hədəfdir. Ancaq kiçik komandam edə bilməz. Hələ yox.

Sadə komponentlərdən ibarət bir eskiz faylı ilə başlamağı planlaşdırırıq. Kifayət qədər çatdıqdan sonra, CSS yaratmaq üçün son inkişaf etdiricilərimizlə işləyəcəyik. Geliştiricilər kodda "seçim silahlarını" istifadə edə bilsələr, dizayn sistemi potensial olaraq işləyə bilər. Kod bazaları hər gün dəyişdiyinə görə əllərimizi onlardan uzaqlaşdırmaq ən yaxşısı ola bilər.

5. Mütəşəkkil qalın

Asan səslənir, amma layihələr yığılmaqda və ortaya çıxmaqla işlərin "sürətli və çirkli" şəkildə aparılması daha asandır. Mütəşəkkil qalmaq üçün vaxt tələb olunur və heç vaxt yerinə yetirilmir, amma hər kəsi təhlükəsiz saxlayır və e-poçtu və ya irəli-geri uçan faylların qarışıqlığını azaldır. Hər dəfə bir istifadəçi interfeysi dəsti ilə yeni şeylər üzərində işləyəndə yuxarıda sadalanan vasitələrdən birini istifadə edərək yaradacağıq, hər şeyi izləməyimiz lazımdır. Əks təqdirdə, başladığımız yerə çatacağıq - hər yerdə fərqli üslublar!

Dizayn sənədlərinin versiyası bütün dizaynerlər üçün bir xəyaldır. Heç bir məhsul onu 100% düzgün əldə etməyib. Abstract and Plant-a yolda qalmağımıza necə kömək edə biləcəyini öyrənməyə çalışırıq. Bir iş üçün istifadə edə biləcəyimiz yeganə onlayn platforma One Drive-dır. Google Drive və Dropbox məhdudiyyətiniz olmadığı müddətdə digər seçimlərdir.

Bunlar komandamın ilk addımlarıdır və bu səyahətə başlayanda çalışacağam. Barmaqlarınızı çarpazlaşdırın, irəliləyirik. “Bir nəfərlik komanda” da daxil olmaqla digər kiçik komandalardan bu çağırışa necə yanaşdıqlarını öyrənmək istərdim.

Dizayn Sistem Kataloqu

Söz verdiyi kimi, ilham və ya "sənətkar kimi oğurlamaq" üçün bəzi dizayn sistemləri:

Nümunə Kitabxanalar / Stil Kılavuzları

Bunu faydalı hesab etdinizsə, indi nə etmək lazımdır. Feed-də daha çox məqalə və təlimat üçün məni izləyin.