Sistem desain telah menjadi modis dan hampir harus dimiliki oleh perusahaan IT seperti penggunaan papan kanban dan gesit. Ada banyak definisi dari suatu sistem desain: seseorang memahami dengan itu hanya kit UI, sementara seseorang percaya bahwa sistem desain harus mencakup komponen dasar dalam kode.
Dari cara kami memahami bahwa inilah saatnya untuk beralih dari kit UI untuk membuat sketsa untuk menampilkan gaya dalam kode - di bawah potongan.
Di mana kita mulai
Pertama, kami memiliki kit UI sketsa untuk setiap platform - web, iOS, Android. Kami juga meluncurkan panduan Wordpress yang menjelaskan cara menggunakan dan menggabungkan komponen, dan menjelaskan apa yang menjadi dasar gaya QIWI. Menggunakan kit UI tunggal dan panduan membantu mempercepat pekerjaan para desainer dan membuat antarmuka produk pada platform yang berbeda konsisten secara visual.
Kit UI tunggal digunakan di
QIWI Wallet ,
QIWI Piggy Bank ,
QIWI Bonus ,
QIWI Cashier ,
QIWI Teamplay , kami juga menggunakannya saat merancang antarmuka untuk produk baru. Jumlah produk yang diluncurkan terus meningkat, sehingga pembuatan template untuk halaman internal adalah langkah logis. Template untuk halaman ujung depan membantu mengurangi tingkat perbedaan gaya dan mempercepat proses desain secara signifikan.
Pada tahap pertama, kami mendapatkan sistem desain visual, yang sekarang kami dapat menggunakan sistem desain dalam kode.
Apa sekarang?
Kami mulai mengisi sistem desain musim panas ini. Sekarang pengembang dari berbagai tim dan semua desainer QIWI Wallet sedang mengerjakan sistem desain.
Pada tahap awal, kami secara aktif berkomunikasi dengan perusahaan yang telah berhasil menerapkan sistem desain. Untuk memahami apa yang akan jatuh ke dalam sistem desain dan menentukan gaya, kami mengadakan pertemuan rutin dengan tim desain di dalamnya.
Aspek penting saat membuat sistem desain adalah komunikasi dengan tim pengembangan, salah satu ide proyek ini adalah menciptakan komunitas pengembang dan desainer dari berbagai tim yang akan bekerja sama untuk membuat dan menyelesaikannya, berbagi pengalaman satu sama lain.
Sekarang kami masih dalam proses, proses berjalan, rencana untuk tahun depan adalah mengisi basis komponen utama dan pada saat yang sama menambahkan komponen unik untuk produk individual, baik segmen B2B dan B2C.
Namun, tidak semua produk QIWI termasuk dalam sistem desain. Misalnya,
Hati Nurani tidak termasuk di dalamnya - gaya visual produk ini sengaja berbeda.
Bagaimana pekerjaannya
Ketika komponen baru muncul, kami mengoordinasikannya di dalam tim desain dan memasukkannya ke dalam kit UI, kemudian masuk ke Zeplin dan Abstract. Abstrak memungkinkan Anda untuk versi layout, itu adalah semacam Git untuk desainer. Dari kit UI, komponen yang sudah selesai masuk ke repositori di GitHub, tempat pengembang dapat menemukannya.
Sekarang sistem desain sedang dalam proses pengisian, sudah memiliki komponen dasar. Berikutnya adalah pola dan pola yang lebih besar + komponen produk yang unik.
Sistem desain berguna untuk semua peserta dalam proses produk:
- untuk bisnis - sistem desain memungkinkan 2 kali lebih cepat untuk meluncurkan solusi baru dan menguji hipotesis produk;
- untuk tim - ada satu basis data komponen yang diuji, yang meningkatkan kecepatan dan kualitas pekerjaan;
- untuk pengguna - membantu menciptakan pengalaman pengguna terpadu dalam kelompok produk QIWI.
Sekarang kami bekerja untuk membuat sistem desain fleksibel dan dapat disesuaikan untuk gaya baru.
Salah satu tugas utama adalah untuk mentransfer produk yang sudah ada ke sistem tunggal. Ini akan membantu menghilangkan warisan dalam desain dan kode dan terus-menerus menjaga antarmuka produk dan layanan tetap terbaru.