Cara Membuat Panduan Gaya: Mulai dengan Kerangka UI

T&J dengan Desainer UX AdRoll tentang mengapa kami melakukannya dan apa yang kami pelajari

Posting blog ini adalah yang pertama dalam seri yang menceritakan perjalanan panduan gaya, mulai dari pembuatannya, hingga menyediakan kerangka kerja UI yang matang untuk tim kami, dan akhirnya menyaring suara dan nada unik untuk produk kami.

Hai! Saya Arya Srinivasan, Peneliti UX di AdRoll. Saya duduk bersama Mason Lee, seorang Desainer UX yang mengerjakan produk API iklan bawaan AdRoll, untuk berbicara tentang pekerjaannya mengembangkan panduan gaya AdRoll.

Arya: Untuk memulai, mengapa Anda memulai proyek panduan gaya? Apa masalah yang perlu diselesaikan?

Mason: Masalahnya adalah ketidakkonsistenan desain, baik antar produk maupun dalam satu produk. Misalnya, tombol yang seharusnya terlihat sama di mana-mana tetapi sebenarnya bervariasi dalam warna, berat font, dan gaya tepi.

Tombol-tombol terlihat berbeda di setiap tiruan desainer dan aplikasi kita.

Pertumbuhan cepat AdRoll berarti kami fokus pada kecepatan. Kami sekarang adalah perusahaan yang lebih besar dengan banyak produk, jadi sebagai perancang saya percaya penting bagi kami untuk menekankan konsistensi dalam cara kami menyajikan produk kami: melalui desain.

Untuk fokus pada desain, pertama-tama kita perlu memperbaiki ketidakkonsistenan yang ada. Desainer UX di sini biasanya fokus pada satu atau dua produk, jadi untuk membuat tim kami memikirkan desain di semua produk, saya membuat pertemuan "UI Smackdown" mingguan untuk membahas pedoman UI.

Dalam setiap pertemuan, kami melihat inkonsistensi desain untuk memutuskan satu desain. Setelah beberapa pertemuan, desainer masih bertanya kepada saya tentang warna atau bantalan yang benar, dll. Kami membutuhkan dokumen pusat dengan semua jawaban, jadi saya membangun Kerangka UI kami di Sketch sebagai sumber daya untuk desainer. Setiap kali kami menyadari ada komponen yang hilang atau ingin memasukkan komponen baru, kami mendiskusikannya dan menambahkannya ke file master UI Framework.

Arya: Anda menyebutkan bahwa Anda ingin AdRoll menjadi perusahaan yang berfokus pada desain - apa yang Anda maksud dengan itu?

Mason: Saya ingin AdRoll menempatkan desain di garis depan sehingga menjadi pembeda kompetitif - diakui oleh pelanggan sebagai produk yang dirancang dengan baik yang benar-benar menyelesaikan kebutuhan mereka.

Arya: Apa tujuan langsung Anda untuk panduan gaya? Apakah Anda memiliki visi jangka panjang untuk proyek ini?

Mason: Tujuan jangka pendek saya adalah memiliki konsistensi desain antara desainer dengan menstandarisasi komponen UI kami. Saya ingin desainer berbicara bahasa yang sama ketika berbicara desain. Misalnya, dalam modal atau tarik-turun, insinyur membangun berdasarkan saran perancang. Jika elemen desain berbeda antara desainer, insinyur akan membuat elemen yang sama dengan cara yang berbeda.

Sasaran jangka menengah saya adalah menentukan gaya ini dalam kode kami di "RollUp," pustaka komponen UI internal AdRoll. Jika kita memiliki style sheet yang telah ditentukan, yang perlu dilakukan oleh teknisi kami adalah menyalinnya. Desainer dan insinyur dapat berbicara dalam bahasa yang sama.

Arya: Apakah Anda mengalami masalah saat membuat panduan gaya? Bagaimana Anda mengatasinya?

Mason: Salah satu rintangan terbesar adalah mendapatkan dukungan dari orang-orang di seluruh tim produk. Untuk melibatkan semua orang, saya mengatur pertemuan dengan daftar item agenda yang jelas untuk dibahas. Saya menyajikan ketidakkonsistenan desain, seperti menu dropdown yang bervariasi di antara produk. Memberikan bukti visual memicu percakapan, dan pada akhirnya, orang-orang peduli dengan produk mereka dan menginginkan konsistensi.

Tantangan lain adalah memutuskan aturan. Ketika berbicara tentang standardisasi komponen, komponen itu harus dapat diterapkan di mana saja, dalam setiap konteks. Anda harus memikirkan setiap kasing tepi. Komponen harus fleksibel, tetapi pada saat yang sama memiliki fitur yang cukup lengkap sehingga mudah digunakan, dikonsumsi, dan dapat diterapkan.

Berikut ini contoh fleksibilitas panduan gaya kami. Keputusan awal kami untuk padding pada dropdown penargetan geografis ini terlalu besar, jadi kami merevisi panduan gaya untuk menjelaskan kasus penggunaan ini.Sebelum (kiri), Setelah (kanan)

Saya sebenarnya ingin memanggil satu tantangan lagi! Penamaan bisa sulit. Seperti yang saya katakan sebelumnya, saya ingin desainer dan insinyur berbicara bahasa yang sama, tetapi ini perlu dilakukan dengan hati-hati. Untuk sesuatu yang sederhana seperti dropdown, kami sebenarnya memiliki beberapa variasi (satu dengan kotak centang, yang lain dengan kotak centang dan blok teks, dan yang lain adalah menu dropdown standar). Bagaimana kami menyebutkan tiga dropdown berbeda sehingga ada pemahaman universal tentang yang mana?

Semantiknya menantang; penamaan kita perlu masuk akal. Kami menggunakan beberapa alat kolaborasi keren untuk mendapatkan konsensus ketika kami memutuskan nama. Sebagai contoh, Wake membantu kami mengumpulkan semua pertanyaan dan masalah terbuka, mendiskusikan solusi, memantau keputusan UI Smackdown, dan melanjutkan percakapan dengan tim produk yang lebih besar melalui integrasi dengan Slack.

Bagaimana kami menggunakan Wake untuk membahas ketidakkonsistenan UI dan berkolaborasi dalam aturan komponen.

Arya: Apakah ada yang unik tentang UI AdRoll, yang harus Anda pertimbangkan saat membuat panduan gaya?

Mason: Dasbor kami sangat data-berat. Selain itu, aliran pembuatan kampanye memberi pengiklan banyak tuas untuk ditarik. Untuk memenuhi kebutuhan pengiklan yang kurang berpengalaman, kami bertujuan untuk memiliki pengaturan default yang efektif. Dalam produk kami, komponen memiliki fungsi yang kompleks tetapi terlihat sederhana dan mudah digunakan.

Arya: Apakah ada beberapa hal yang ingin Anda ketahui ketika Anda mulai membuat panduan gaya?

Mason: Saya berharap saya memiliki pemahaman yang lebih dalam tentang bagaimana semua produk kami bekerja sejak awal. Misalnya, kami membagikan cara kerja masing-masing produk kami dalam rapat kritik desain mingguan kami, jadi saya tahu bagaimana SendRoll (produk penargetan ulang email kami) bekerja di permukaan, tetapi saya tidak memiliki pengetahuan yang mendalam tentang SendRoll yang dilakukan desainernya. Saya pikir pemahaman yang bernuansa tentang produk pasti membantu ketika mengerjakan panduan gaya, karena saya kemudian memiliki pemahaman yang lebih baik tentang semua kasus penggunaan potensial.

Arya: Jadi apa cara terbaik untuk mencapai pemahaman umum tentang proses perancang dan produk mereka?

Mason: Meskipun kami benar-benar fokus pada pengiriman produk kami, kami melakukan pekerjaan dengan baik untuk berbagi proses desain kami dalam pertemuan kritik desain mingguan kami. Saya pikir kita bisa lebih baik tentang menutup loop setelah setiap pertemuan - bagaimana perancang menggabungkan umpan balik dari pertemuan? Setelah produk dikirim dan digunakan oleh pengiklan kami, kami juga dapat membagikan bagaimana pengiklan menggunakan produk berdasarkan wawasan analitik.

Arya: Apakah ada sumber daya yang Anda rujuk saat mengerjakan proyek ini?

Mason: Saya membaca Desain Atom oleh Brad Frost, meneliti secara online, dan berbicara dengan desainer UX lainnya di MeetUps. Jika Anda berpikir bahwa perusahaan tertentu mempraktikkan desain yang baik, maka sangat mungkin mereka telah berbicara tentang panduan gaya mereka di suatu tempat online.

Arya: Apa status panduan gaya kami?

Mason: Saya telah menangkap dan meninjau kembali semua elemen UI yang kami gunakan di berbagai produk kami dan mengelompokkannya ke dalam fondasi, komponen, pola, dan halaman, yang akan berfungsi sebagai sumber kebenaran untuk desain UI kami.

Anda dapat memeriksa elemen UI elemen dan komponen pada Dribbble. Jika Anda terbiasa dengan Desain Atom, saya mengelompokkan level "atom" dan "molekul" ke dalam apa yang saya sebut "komponen." Misalnya, menggabungkan judul formulir dan input membuatnya mudah bagi desainer lain untuk dengan mudah menyalin formulir yang telah diisi bidang.

Terima kasih sudah membaca!

Lihatlah topik yang akan datang ini saat kami mengembangkan panduan gaya kami:

  • Bagaimana Kerangka UI menyederhanakan kolaborasi
  • Mengembangkan stylesheet baru berdasarkan Kerangka UI
  • Cara membangun situs web Panduan Gaya
  • Perjalanan untuk menemukan Suara dan Nada kami