Mengapa Startup Membutuhkan Styleguide

Bahkan untuk seorang desainer berpengalaman, membuat panduan gaya baru untuk produk tertentu itu sulit—ada banyak kemungkinan arah desain, dan prosesnya bisa dengan cepat menjadi berlebihan. Kehidupan startup sangat sibuk, cepat, dan penuh dengan klise seperti “sempurna adalah musuh yang sudah selesai”, “bergerak cepat dan hancurkan sesuatu”, atau “luncurkan sekarang, perbaiki nanti”.

Membuat panduan gaya di bawah slogan-slogan seperti itu dan prioritas yang berfluktuasi memang menantang, tetapi suatu keharusan jika desain produk ingin berhasil dalam jangka panjang.

Dalam beberapa tahun terakhir, kami telah mendengar banyak tentang sistem desain, panduan gaya, pustaka pola, dan desain atom. Meskipun alat-alat ini sangat berguna, menggunakannya bisa tampak berlebihan ketika Anda hanya ingin membuat beberapa layar untuk MVP atau untuk mendemonstrasikan aplikasi. Namun, memiliki panduan gaya tidak hanya akan meningkatkan proses desain Anda secara umum, tetapi juga akan membuat aplikasi Anda lebih solid dan konsisten.

Pertama-tama mari kita bicara tentang manfaat utama dari styleguide, dan kemudian menyentuh lingkungan startup yang menantang. Terakhir, kita akan membahas bagaimana styleguide selalu berkembang sebagai dokumen hidup.

Lima Alasan Teratas Mengapa Styleguide Adalah Ide Bagus

1. Panduan Gaya Membuat Desain Konkret dan Branding Jelas

Sebagai desainer tunggal di sebuah startup—yang sering terjadi—tidak banyak peluang untuk meninjau dan menantang keputusan desain yang dibuat oleh orang lain dalam tim. Meskipun setiap orang mungkin bekerja sama, desain tidak harus dibagikan dengan orang lain. Ini berarti hanya ada satu orang yang memvalidasi desain akhir.

Styleguide akan memberikan panduan dan dokumentasi untuk startup sebagai referensi. Ini akan menantang beberapa pilihan desain yang dibuat oleh desainer atau tim karena mereka harus divalidasi dalam konteks global aplikasi. Merancang komponen UI karena berfungsi dengan baik di satu layar tidak akan memotongnya. Desain yang dipikirkan dengan matang harus menyelesaikan satu masalah desain dalam satu situasi, serta masalah yang meluas yang ditemukan di layar lain aplikasi Anda.

Panduan gaya membuat keseluruhan gaya desain, pedoman merek, spesifikasi, dan aturan tersedia untuk semua orang di perusahaan Anda. Ini hanya dengan sekali klik. Mereka dapat membuka URL untuk mengakses panduan gaya online atau mengunduh PDF dengan mudah. Desain menjadi pekerjaan semua orang—tidak lagi menjadi tanggung jawab tim desain semata. Ini adalah pendekatan yang bijaksana yang akan meningkatkan antarmuka pengguna produk Anda.

2. Panduan Gaya Membuat Desain Anda Lebih Konsisten

Ini menyediakan semacam kamus untuk bahasa desain UI Anda. Anda dapat menggunakan terminologi yang sama ketika Anda ingin mengomunikasikan sesuatu yang telah Anda ungkapkan. Bayangkan jika kita memiliki kata-kata yang sedikit berbeda untuk mengungkapkan hal yang sama:

1. "Sedang hujan; Aku butuh payungku.”
2. “Hujan, aku butuh payungku”
3. “Hujan, aku butuh payungku”

Ini mungkin membuat bahasa menjadi puitis, tetapi sulit untuk dipahami. Pada dasarnya, ini adalah ide yang sama dengan UI situs atau aplikasi. Untuk kemudahan penggunaan, Anda hanya boleh menciptakan "kata" baru saat Anda benar-benar menciptakan sesuatu yang baru. Dengan cara ini, Anda terikat oleh aturan ketat yang mengatakan, "Hanya komponen yang memecahkan masalah desain berulang kali di seluruh produk yang diizinkan masuk ke produk dan selanjutnya panduan gaya."

Konsistensi membuat produk Anda lebih ramah pengguna; produk yang sangat bermanfaat dapat diterjemahkan menjadi lebih banyak keterlibatan dan penjualan.

3. Menggunakan Kembali Komponen Sistem yang Sama Membuat Aplikasi Anda Lebih Mudah Digunakan

Seperti dalam contoh bahasa, konsistensi adalah kuncinya. Setelah setiap komponen dipahami oleh pengguna, ketika digunakan lagi dalam konteks yang berbeda, orang akan terbiasa dengan perilakunya. Dalam hal interaksi pengguna, konsistensi ini meningkatkan kegunaan produk secara keseluruhan.

Bekerja dengan sistem desain berbasis komponen menghemat uang dan juga membuat produk lebih mudah diperbarui. Jika ada masalah kegunaan dengan komponen dalam situasi tertentu, itu dapat diperbaiki sekali dan semua masalah potensial lainnya dengan komponen itu juga akan diperbarui.

4. Panduan Gaya Membuat Aplikasi Anda Lebih Cepat Berkembang dalam Jangka Panjang

Saat tim Anda mengembangkan komponen umum untuk layar, mereka mengembangkan solusi yang juga akan mereka gunakan di tempat lain. Ini menghemat waktu pengembangan—sebagian besar. Ketika skala perusahaan Anda, ini bisa berarti menghemat sebanyak 10x jam kerja yang dibutuhkan untuk membuat layar baru.

5. Panduan Gaya Memfasilitasi Efisiensi dan Inovasi Produksi

Membuat panduan gaya membuat desain lebih mudah diakses dan tersedia untuk seluruh perusahaan. Pengembang dan desainer dapat membuat prototipe ide lebih cepat dan lebih mudah. Bootstrap sering dipuji karena memudahkan pengembang untuk membuat prototipe yang berfungsi—panduan gaya Anda memiliki tujuan yang sama. Ini memberikan landasan referensi untuk UI baru yang akan dibangun oleh pengembang, tanpa tim desain harus membuat layar terlebih dahulu (meskipun tim desain harus QA layar akhir).

Tantangan dari Startup, Styleguide di Flux

Membuat sistem desain di lingkungan startup tidak linier seperti di perusahaan yang lebih matang di mana mereka terbiasa dengan proses yang lebih ramping. Di perusahaan yang lebih tradisional, tim desain melakukan penelitian, ide, dan eksperimen UX, dan kemudian menghasilkan panduan gaya merek akhir. Proses ini tidak cocok untuk semua perusahaan. Startup bekerja di lingkungan di mana visi dan persyaratan produk mereka selalu berubah-ubah. Mereka bekerja dengan MVP (produk minimum yang layak), versi aplikasi mereka yang tidak lengkap yang digunakan untuk menguji ide mereka dan menunjukkan potensinya kepada pengguna.

Ketika datang untuk membuat styleguide, ini bisa menjadi masalah.

Dalam lingkungan yang selalu berkembang, seorang desainer biasanya berjuang untuk membuat panduan gaya yang seharusnya agak 'tetap'. Seorang desainer mungkin tidak memiliki waktu untuk memikirkan secara menyeluruh semua komponen yang sedang dibuat, meskipun mungkin masih berakhir di rilis aplikasi berikutnya. Facebook terkenal menukar menu hamburger mereka dengan navigasi tab ketika mereka sedikit matang. Apakah menurut Anda siapa pun yang pertama kali meletakkan menu hamburger di sana juga menambahkannya ke panduan gaya Facebook?

Anda bahkan mungkin mempertimbangkan bahwa ini belum waktunya untuk membuat panduan gaya. Anda mungkin menyadari bahwa dalam jangka panjang Anda akan membutuhkannya, tetapi saat ini lebih penting untuk membuat layar untuk pengujian kegunaan aplikasi. Terlebih lagi, Anda juga memerlukan beberapa halaman pemasaran untuk mempromosikan aplikasi Anda. Tiba-tiba, desain Anda perlu ditingkatkan, dan saat Anda membuat layar, Anda mulai melihat nilai memiliki panduan gaya yang dapat menjaga desain Anda dan merek perusahaan tetap konsisten.

Masalahnya adalah Anda tidak tahu persis kapan waktu yang tepat untuk memperdagangkan fleksibilitas demi stabilitas. Anda harus memutuskan kapan Anda harus memulai panduan gaya dan kapan Anda harus fokus membuat layar. Pendekatan yang optimal mungkin untuk menghasilkan panduan gaya pada saat yang sama saat Anda mengirimkan layar—dengan cara ini Anda mungkin bisa mendapatkan yang terbaik dari kedua dunia.

Mulailah dengan Beberapa Inspirasi UI

Cara yang baik untuk memulai, terutama jika Anda bukan seorang desainer, adalah dengan mengumpulkan contoh gaya desain yang Anda sukai, atau yang lebih penting, apa yang menurut Anda akan ditanggapi oleh pengguna. Kumpulkan contoh sebanyak mungkin, dan letakkan di folder/papan InVision/papan Niice/dll. Mereka dapat digunakan sebagai referensi dan inspirasi bersama dengan kepekaan desain Anda. Anda dapat membangunnya nanti untuk membuat pustaka pola.

Misalnya, ketika saya mengerjakan panduan gaya untuk perusahaan yang mempromosikan artis di industri hiburan, kami bertanya-tanya apakah latar belakang terang atau gelap akan berdampak lebih besar pada pengguna kami. Saya melihat ratusan situs web berbeda dalam permainan/film/produksi visual untuk melihat bagaimana mereka menggunakan latar belakang gelap dan terang.

Saya membuat lembar referensi di mana saya menyoroti pola yang paling umum. Salah satu pola yang saya identifikasi adalah bahwa perusahaan di industri tersebut cenderung menggunakan latar belakang yang lebih gelap saat mempresentasikan produk mereka, tetapi menggunakan latar belakang putih dalam upaya pemasaran, eCommerce, dan toko mereka.

Anda tidak perlu membahasnya sedalam itu, tetapi menurut saya memiliki referensi visual membantu, tidak hanya dalam membuat panduan gaya, tetapi juga dalam mengingat beberapa kasus penggunaan yang mungkin perlu Anda rancang. Setelah Anda merasa nyaman dengan referensi yang Anda kumpulkan, Anda dapat mulai mengerjakan desain visual.

Desain Komponen UI Padat

Saat bekerja di startup, membuat komponen lebih sulit daripada membuat halaman—setidaknya di awal. Saat Anda mendesain halaman, Anda sering memiliki gagasan tentang bagaimana halaman itu akan digunakan. Itu belum tentu terjadi ketika Anda mendesain sebuah komponen. Anda mencoba mendesain untuk kasus penggunaan tertentu, tetapi Anda ingin itu menjadi bagian dari sistem desain universal, dan Anda perlu mendekatinya seperti itu. Misalnya, Anda mungkin ingin membuat komponen sub-navigasi dengan tiga tombol. Anda mungkin juga membutuhkannya untuk bekerja dengan empat, lima, atau sepuluh tombol, dan itu perlu bekerja di ponsel, tablet, dan desktop. Anda perlu berpikir ke depan.

Anda menginginkan tingkat kegigihan atau daya tahan tertentu dalam suatu komponen. Komponen umum tidak boleh sering berubah, dan harus dapat digunakan kembali di banyak tempat di seluruh produk Anda. Misalnya, jika Anda hanya tertarik pada aplikasi iOS, maka Anda ingin menguji komponen Anda berdasarkan jumlah opsi atau panjang konten, tidak harus ukuran layar. Idenya adalah jika itu layak di UI di banyak tempat di aplikasi Anda, maka Anda tahu itu adalah komponen yang berpotensi menjadi bagian dari panduan gaya Anda.

Sebuah startup harus memulai dari nol dan kemudian bergerak dengan cepat. Bos Anda mungkin menginginkan layar yang dirancang pada akhir hari. Itu berarti Anda tidak dapat benar-benar mengembangkan seluruh panduan gaya dan kemudian muncul dengan layar. Lebih buruk lagi, Anda mungkin merancang panduan gaya dengan komponen yang tidak akan pernah terlihat jelas karena visi perusahaan telah berubah. Seperti yang mereka katakan, lebih baik kirim sekarang.

Membuat panduan gaya yang hebat membutuhkan waktu, dan karena itu akan menjadi dasar dari sistem desain Anda, Anda ingin melakukannya dengan benar. Di lingkungan startup, Anda perlu mengerjakan styleguide Anda dengan semuanya secara bersamaan.

Panduan Gaya sebagai Dokumen Hidup

Anda harus memikirkan tentang styleguide Anda sebagai pekerjaan yang sedang berjalan. Seperti startup yang mencari tahu strateginya, Anda akan mencari tahu panduan gaya Anda seiring berjalannya waktu. Anda akan mengeditnya dan menyesuaikannya dari waktu ke waktu hingga menjadi dasar UI Anda. Salah satu pendekatan yang berguna adalah memulai mockup pertama pada saat yang sama Anda memulai styleguide Anda. Buka dua file dengan perangkat lunak favorit Anda (dalam kasus saya, Sketch); satu disebut page name dan satu lagi styleguide . Saat mengerjakan desain layar, Anda dapat mulai menyemai panduan gaya dengan elemen yang membentuk desain Anda.

Saat Anda mulai melakukan lebih banyak hal ini, Anda akan menyadari sejak awal bahwa beberapa komponen adalah kandidat utama untuk dimasukkan dalam panduan gaya. Misalnya, jika Anda telah menetapkan gaya ikon, maka semua ikon Anda dapat masuk ke panduan gaya sejak awal.

Saya biasanya membuat bagian yang disebut 'ikon yang dilakukan sejauh ini.' Jika suatu saat seseorang membutuhkan ikon, mereka harus memeriksa bagian ini terlebih dahulu sebelum membuat yang baru.

Item jelas lainnya yang perlu dipertimbangkan adalah warna, tombol, pemilih, judul, header, teks isi, dll. Jika Anda menggunakan gaya khusus untuk pemasaran, Anda dapat mempertimbangkan untuk memasukkannya ke dalam panduan gaya dan memberi label dengan tepat. Tidak apa-apa jika Anda tidak sepenuhnya puas dengan item tertentu. Anda dapat menyempurnakan elemen UI di sistem desain Anda nanti saat ada kesempatan, dan memperbarui panduan dengan tepat. Jangan lupa, styleguide adalah dokumen hidup , terutama pada startup.

Akhirnya, ketika saya mulai menempatkan tata letak dalam panduan, saya tahu bahwa saya mulai mencapai titik di mana semua komponen harus mendekati keadaan akhir mereka. Bagian ini menandai titik kritis dalam proses pembuatan panduan gaya—sekarang Anda dapat merayakannya! Cara yang baik untuk merayakan pencapaian tersebut adalah dengan membuat logo atau ikon (pertimbangkan untuk menamainya) untuk panduan gaya versi 1.0.

Beberapa orang bahkan sampai mencetak logo/ikon sebagai stiker sehingga tim memiliki semacam piala. Itu juga titik di mana saya biasanya kembali ke cara kerja yang lebih tradisional dengan panduan dengan membuka panduan gaya itu terlebih dahulu, lalu membuat file baru untuk antarmuka apa pun yang perlu dilakukan.

Kesimpulan

Sebagai seorang desainer, dengan membuat panduan gaya sedini mungkin, Anda memastikan bahwa startup Anda mematuhi standar kualitas yang lebih tinggi. Ini mungkin menantang, tetapi itu sepadan dengan usaha. Panduan gaya yang solid dan menyeluruh tidak hanya akan membantu Anda memiliki produk yang lebih baik, tetapi juga membantu Anda mengurangi biaya pengembangan.

Ada cara untuk mewujudkannya bahkan di lingkungan yang serba cepat di mana keputusan cepat dibuat dan terkadang desain perlu diubah dengan cepat. Mudah-mudahan, proses yang dijelaskan di atas akan membantu desainer di setiap startup mengatasi tantangan kompleksitas dan kecepatan sambil juga menciptakan panduan gaya yang kokoh untuk kepentingan produk.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib