Mendesain Dengan Kode: Pendekatan Modern Untuk Desain (Tantangan Pengembangan)

Artikel ini telah didukung dengan baik oleh teman-teman terkasih kami di UXPin yang misinya adalah untuk memungkinkan pengalaman pengguna terbaik dengan menggabungkan desain dan teknik ke dalam satu dunia pengembangan produk yang lebih baik dan lebih cepat. Terima kasih!

Gesekan dalam kerja sama antara desainer dan pengembang memicu diskusi yang terus berkembang setua industri itu sendiri. Kami datang jauh ke tempat kami hari ini. Alat kami telah berubah. Proses dan metodologi kami telah berubah. Tetapi masalah yang mendasarinya sering kali tetap sama.

Salah satu masalah berulang yang sering saya lihat, terlepas dari jenis dan ukuran tim, adalah mempertahankan sumber kebenaran yang dapat diandalkan . Bahkan mempekerjakan orang-orang terbaik dan menggunakan solusi standar industri yang telah terbukti sering kali membuat kita tidak senang bahwa sesuatu pasti bisa dilakukan dengan lebih baik. "Versi final" yang terkenal sering tersebar di dokumentasi teknis, file desain, spreadsheet, dan tempat lain. Menjaga semuanya tetap sinkron biasanya merupakan tugas yang membosankan dan menakutkan.

Catatan : Artikel ini ditulis bekerja sama dengan tim UXPin. Contoh yang disajikan dalam artikel ini telah dibuat di aplikasi UXPin. Beberapa fitur hanya tersedia pada paket berbayar. Gambaran lengkap harga UXPin dapat ditemukan di sini.

Masalah Dengan Alat Desain

Berbicara tentang mempertahankan sumber kebenaran, ketidakefisienan alat desain sering diindikasikan sebagai salah satu titik kesulitan yang paling sering dialami. Alat desain modern berkembang dan berkembang pesat dengan upaya yang luar biasa. Tetapi ketika membangun jembatan antara desain dan pengembangan, tidak jarang mendapat kesan bahwa banyak dari upaya tersebut didasarkan pada asumsi yang salah.

Sebagian besar alat desain modern didasarkan pada model yang berbeda dari teknologi yang digunakan untuk mengimplementasikan desain di kemudian hari. Mereka dibangun sebagai editor grafis dan berperilaku seperti itu. Cara tata letak dibangun dan diproses dalam alat desain pada akhirnya berbeda dari apa pun yang ditawarkan CSS, JavaScript, dan bahasa pemrograman lainnya. Membangun antarmuka pengguna menggunakan grafik vektor (atau bahkan raster) adalah tebakan konstan tentang bagaimana dan jika apa yang Anda buat harus diubah menjadi kode nanti.

Desainer sering mengeluh tentang kreasi mereka yang tidak diimplementasikan sebagaimana dimaksud. Bahkan upaya paling berani menuju desain pixel-sempurna tidak menyelesaikan semua masalah. Dalam alat desain, hampir tidak mungkin untuk membayangkan dan mencakup semua kasus yang mungkin. Mendukung status yang berbeda, mengubah salinan, berbagai ukuran area pandang, resolusi layar, dan sebagainya, cukup sediakan terlalu banyak variabel perubahan untuk mencakup semuanya.

Selain itu muncul beberapa kendala dan keterbatasan teknis . Menjadi seorang desainer tanpa pengalaman pengembangan sebelumnya, sangat sulit untuk mempertimbangkan semua faktor teknis. Ingat semua kemungkinan keadaan input. Pahami batasan dukungan browser. Memprediksi implikasi kinerja pekerjaan Anda. Desain untuk aksesibilitas, setidaknya dalam arti yang jauh lebih luas daripada kontras warna dan ukuran font. Menyadari tantangan ini, kami menerima sejumlah dugaan sebagai kejahatan yang diperlukan.

Tetapi pengembang sering kali harus bergantung pada tebakan juga. Antarmuka pengguna yang diejek dengan editor grafis jarang menjawab semua pertanyaan mereka. Apakah komponennya sama dengan yang sudah kita miliki, atau tidak? Haruskah saya memperlakukannya sebagai negara bagian yang berbeda atau sebagai entitas yang terpisah? Bagaimana seharusnya desain ini berperilaku ketika X, Y, atau Z? Bisakah kita membuatnya sedikit berbeda karena akan lebih cepat dan lebih murah? Ironisnya, menanyakan siapa yang pertama kali membuat desain tidak selalu membantu. Tidak jarang, mereka juga tidak tahu.

Dan biasanya, ini bukan di mana ruang lingkup tumbuh frustrasi berakhir. Karena itu, ada juga orang lain . Manajer, pemangku kepentingan, pemimpin tim, tenaga penjualan. Dengan perhatian dan kapasitas mental mereka yang terbentang tipis di antara semua alat dan tempat di mana berbagai bagian produk hidup, mereka berjuang lebih dari siapa pun untuk memahaminya dengan baik.

Menavigasi prototipe, memahami mengapa fitur dan status tertentu hilang dari desain, dan membedakan antara apa yang hilang, apa yang sedang dikerjakan, dan apa yang secara sadar dikeluarkan dari ruang lingkup terasa hampir mustahil. Mengulangi dengan cepat apa yang sudah dilakukan, memvisualisasikan umpan balik Anda, dan mempresentasikan ide Anda sendiri juga terasa hampir tidak mungkin. Ironisnya, alat dan proses yang semakin canggih ditujukan agar desainer dan pengembang dapat bekerja sama dengan lebih baik ; mereka menetapkan standar yang lebih tinggi, dan partisipasi aktif dalam proses untuk orang lain bahkan lebih sulit.

Solusinya

Banyak kepala industri kami telah bekerja untuk mengatasi masalah-masalah yang menghasilkan paradigma, alat, dan konsep baru. Dan memang banyak yang berubah menjadi lebih baik. Mari kita lihat sekilas dan apa saja pendekatan paling umum terhadap tantangan yang diuraikan.

Desainer Pengkodean

“Haruskah desainer membuat kode?” adalah pertanyaan klise yang dibahas berkali-kali melalui artikel, pembicaraan konferensi, dan semua media lain dengan suara-suara baru dalam diskusi yang bermunculan dengan keteraturan yang stabil sesekali. Ada asumsi umum bahwa jika desainer "tahu cara membuat kode" (jangan mulai memikirkan bagaimana mendefinisikan "mengetahui cara membuat kode" sejak awal), akan lebih mudah bagi mereka untuk membuat desain yang menggunakan teknologi. kendala dan lebih mudah untuk diimplementasikan.

Beberapa akan melangkah lebih jauh dan mengatakan bahwa mereka harus mengambil peran aktif dalam implementasinya. Pada tahap itu, mudah untuk mengambil kesimpulan bahwa tidak masuk akal untuk melewatkan menggunakan alat desain sama sekali dan hanya "desain dalam kode".

Menggoda sebagai ide mungkin terdengar, jarang membuktikan dirinya dalam kenyataan. Semua desainer pengkodean terbaik yang saya tahu masih menggunakan alat desain. Dan itu jelas bukan karena kurangnya keterampilan teknis. Untuk menjelaskan mengapa penting untuk menyoroti perbedaan antara ide, membuat sketsa, dan membangun hal yang sebenarnya.

Selama ada banyak kasus penggunaan yang valid untuk "mendesain dalam kode" , seperti memanfaatkan gaya dan komponen yang telah ditentukan sebelumnya untuk membangun antarmuka yang berfungsi penuh dengan cepat tanpa mengganggu diri Anda dengan alat desain sama sekali, janji kebebasan visual tanpa batas ditawarkan oleh alat desain masih memiliki nilai yang tak terbantahkan. Banyak orang merasa membuat sketsa ide-ide baru dalam format yang ditawarkan oleh alat desain lebih mudah dan lebih cocok untuk sifat proses kreatif. Dan itu tidak akan berubah dalam waktu dekat. Alat desain ada di sini untuk tinggal dan untuk selamanya.

Sistem Desain

Misi besar sistem desain, salah satu kata kunci terbesar dari dunia desain digital dalam beberapa tahun terakhir, selalu persis seperti itu: untuk membatasi dugaan dan pengulangan, meningkatkan efisiensi dan pemeliharaan, dan menyatukan sumber kebenaran. Sistem korporat seperti Fluent atau Material Design telah melakukan banyak kerja keras dalam mengadvokasi ide tersebut dan membawa momentum untuk adopsi konsep tersebut di antara pemain besar dan kecil. Dan memang, sistem desain membantu banyak berubah menjadi lebih baik. Pendekatan yang lebih terstruktur untuk mengembangkan kumpulan prinsip, pola, dan komponen desain yang ditentukan membantu banyak perusahaan untuk membangun produk yang lebih baik dan lebih mudah dirawat .

Beberapa tantangan tidak langsung diselesaikan. Merancang sistem desain dengan alat desain populer menghambat upaya banyak orang dalam mencapai satu sumber kebenaran. Sebaliknya, sejumlah besar sistem telah dibuat yang, meskipun disatukan, masih ada di dua sumber yang terpisah dan tidak kompatibel: sumber desain dan sumber pengembangan. Mempertahankan keseimbangan timbal balik antara keduanya biasanya terbukti menjadi tugas yang menyakitkan, mengulangi semua poin rasa sakit yang paling dibenci yang coba dipecahkan oleh sistem desain sejak awal.

Integrasi Desain Dan Kode

Untuk mengatasi masalah pemeliharaan sistem desain, gelombang solusi lain segera tiba. Konsep seperti token desain mulai mendapatkan daya tarik. Beberapa dimaksudkan untuk menyinkronkan status kode dengan desain, seperti API terbuka yang memungkinkan pengambilan nilai tertentu langsung dari file desain. Lainnya dimaksudkan untuk menyinkronkan desain dengan kode, misalnya dengan menghasilkan komponen dalam alat desain dari kode.

Hanya sedikit dari ide-ide ini yang pernah diadopsi secara luas. Hal ini kemungkinan besar disebabkan oleh keuntungan yang dipertanyakan dari kemungkinan manfaat atas biaya masuk yang diperlukan dari solusi yang masih sangat tidak sempurna. Menerjemahkan desain secara otomatis ke dalam kode masih menimbulkan tantangan besar bagi sebagian besar kasus penggunaan profesional. Solusi yang memungkinkan Anda untuk menggabungkan kode yang ada dengan desain juga sangat terbatas.

Misalnya, tidak ada solusi yang memungkinkan Anda mengimpor komponen berkode ke alat desain, meskipun secara visual sesuai dengan sumbernya, yang akan sepenuhnya meniru perilaku komponen tersebut. Tidak ada sampai sekarang.

Menggabungkan Desain Dan Kode Dengan UXPin

UXPin, sebagai aplikasi desain yang matang dan berfitur lengkap, bukanlah pemain baru di panggung alat desain. Namun kemajuan terbarunya, seperti teknologi Merge, adalah apa yang dapat mengubah kemungkinan cara kita berpikir tentang alat desain dan pengembangan.

UXPin dengan teknologi Merge memungkinkan kami menghadirkan komponen nyata dan langsung ke dalam desain dengan mempertahankan visual dan fungsionalitasnya — semuanya tanpa menulis satu baris kode pun. Komponen, meskipun tertanam dalam file desain, akan berperilaku persis seperti rekan-rekan mereka yang sebenarnya — karena mereka adalah rekan-rekan mereka yang sebenarnya. Hal ini memungkinkan kita tidak hanya untuk mencapai paritas yang mulus antara kode dan desain, tetapi juga untuk menjaga keduanya tetap sinkron tanpa gangguan.

UXPin mendukung perpustakaan desain komponen React yang disimpan dalam repositori git serta integrasi yang kuat dengan Storybook yang memungkinkan penggunaan komponen dari hampir semua kerangka kerja front-end yang populer. Jika Anda ingin mencobanya sendiri, Anda dapat meminta akses ke situs web UXPin:

• Minta akses ke UXPin dengan teknologi Gabung →

Menggabungkan komponen langsung dengan desain di UXPin hanya membutuhkan beberapa langkah. Setelah menemukan komponen yang tepat, Anda dapat meletakkannya di kanvas desain dengan sekali klik. Ini akan berperilaku seperti objek lain dalam desain Anda. Apa yang membuatnya istimewa adalah, meskipun menjadi bagian integral dari desain, Anda sekarang dapat menggunakan dan menyesuaikannya sama seperti yang Anda lakukan di code .

UXPin memberi Anda akses ke properti komponen, memungkinkan Anda mengubah nilai dan variabelnya, dan mengisinya dengan data Anda sendiri. Setelah memulai prototipe, komponen harus berperilaku persis seperti yang diharapkan, mempertahankan semua perilaku dan interaksi.

Dalam desain Anda, Anda dapat mencampur dan mencocokkan jumlah perpustakaan dan sistem desain yang tidak terbatas . Selain menambahkan perpustakaan Anda sendiri, Anda juga dapat memilih di antara berbagai perpustakaan sumber terbuka yang tersedia di luar kotak seperti Desain Material, UI Lancar, atau Karbon.

Menggunakan komponen "sebagaimana adanya" juga berarti komponen tersebut harus berperilaku sesuai dengan perubahan konteks, seperti lebar viewport. Dengan kata lain, komponen tersebut sepenuhnya responsif dan mudah beradaptasi.

Catatan : Jika Anda ingin mempelajari lebih lanjut tentang membangun desain yang benar-benar responsif dengan UXPin, saya sangat menyarankan Anda untuk membaca artikel ini.

Konteks juga bisa berarti bertema. Siapa pun yang mencoba membangun (dan memelihara!) sistem desain bertema dalam alat desain, atau setidaknya membuat sistem yang memungkinkan Anda untuk dengan mudah beralih antara tema terang dan gelap, tahu betapa rumitnya tugas itu dan betapa tidak sempurnanya hasil biasanya. Tidak ada alat desain yang dioptimalkan dengan baik untuk tema di luar kotak dan plugin yang tersedia yang ditujukan untuk memecahkan masalah itu jauh dari menyelesaikannya sepenuhnya.

Karena UXPin dengan teknologi Merge menggunakan komponen langsung yang nyata, Anda juga dapat membuat tema sebagai komponen langsung yang nyata . Anda tidak hanya dapat membuat tema sebanyak yang Anda butuhkan, tetapi menggantinya bisa secepat memilih tema yang tepat dari menu drop-down. (Anda dapat membaca lebih lanjut tentang peralihan tema dengan UXPin di sini.)

Keuntungan

UXPin dengan teknologi Merge memungkinkan tingkat keseimbangan antara desain dan kode yang jarang terlihat sebelumnya. Menjadi setia pada sumber dalam proses desain membawa keuntungan sempurna untuk semua sisi proses. Desainer dapat mendesain dengan percaya diri mengetahui bahwa apa yang mereka buat tidak akan disalahartikan atau dikembangkan secara salah. Pengembang tidak harus menerjemahkan desain ke dalam kode dan mengacaukan kasus tepi yang tidak jelas dan skenario yang tidak terungkap. Selain itu, setiap orang dapat berpartisipasi dalam pekerjaan dan dengan cepat membuat prototipe ide mereka menggunakan komponen langsung tanpa pengetahuan tentang kode yang mendasarinya sama sekali. Mencapai proses yang lebih demokratis dan partisipatif jauh lebih mudah dijangkau.

Menggabungkan desain Anda dengan kode mungkin tidak hanya meningkatkan cara desainer bekerja sama dengan konstituen lain dari tim, tetapi juga menyempurnakan proses dan praktik internal mereka. UXPin dengan teknologi Merge dapat menjadi pengubah permainan bagi mereka yang berfokus pada pengoptimalan upaya desain dalam skala besar , terkadang disebut sebagai DesignOps.

Menggunakan sumber kebenaran yang tepat membuatnya lebih mudah untuk menjaga konsistensi antara karya yang dihasilkan oleh orang yang berbeda di antara tim, membantu menjaganya tetap selaras, dan memecahkan masalah yang tepat bersama dengan seperangkat alat bersama. Tidak ada lagi "simbol terpisah" dengan beberapa variasi yang tidak diminta.

Intinya, yang kami dapatkan adalah penghematan waktu yang sangat besar. Desainer menghemat waktu mereka dengan menggunakan komponen dengan percaya diri dan fungsionalitasnya yang siap pakai. Mereka tidak perlu memperbarui file desain saat komponen berubah, atau mendokumentasikan pekerjaan mereka dan "melambaikan tangan" untuk menjelaskan visi mereka kepada anggota tim lainnya. Pengembang menghemat waktu dengan mendapatkan komponen dari desainer dengan cara yang langsung dapat dicerna yang tidak memerlukan tebakan dan mengutak-atik ekstra.

Orang yang bertanggung jawab untuk pengujian dan QA menghemat waktu untuk mencari ketidakkonsistenan antara desain dan kode dan mencari tahu apakah implantasi terjadi sebagaimana dimaksud. Pemangku kepentingan dan anggota tim lainnya menghemat waktu melalui manajemen yang lebih efisien dan navigasi yang lebih mudah dari tim tersebut. Lebih sedikit gesekan dan proses yang mulus membatasi frustrasi di antara anggota tim.

Kekurangan

Mengambil keuntungan dari manfaat ini datang pada beberapa biaya masuk sekalipun. Untuk menggunakan alat seperti UXPin secara efisien dalam proses Anda, Anda harus memiliki sistem desain atau pustaka komponen yang ada. Atau, Anda dapat mendasarkan pekerjaan Anda pada salah satu sistem sumber terbuka yang akan selalu memberikan beberapa tingkat batasan.

Namun, jika Anda berkomitmen untuk membangun sistem desain di tempat pertama, memanfaatkan UXPin dengan teknologi Merge dalam proses Anda akan datang tanpa biaya tambahan. Dengan sistem desain yang dibangun dengan baik, mengadopsi UXPin seharusnya tidak menjadi perjuangan, sementara manfaat dari perubahan semacam itu mungkin terbukti secara drastis.

Ringkasan

Adopsi sistem desain secara luas membahas masalah pengembang media dan desainer yang bekerja dengannya. Saat ini, kita dapat mengamati pergeseran menuju proses yang lebih terpadu yang tidak hanya mengubah medium tetapi juga cara kita membuatnya. Menggunakan alat yang tepat sangat penting untuk perubahan itu. UXPin dengan teknologi Merge adalah alat desain yang memungkinkan menggabungkan desain dengan komponen kode langsung dan secara drastis mempersempit kesenjangan antara desain domain dan operasi pengembangan.

Dimana Selanjutnya?

• UXPin Merge: Integrasi Buku Cerita
  Pelajari bagaimana integrasi Buku Cerita dapat membantu tim produk Anda dan cobalah!
• Penggabungan UXPin: Integrasi Git
  Minta akses untuk melihat cara kerja integrasi dengan repositori Git.
• Penjelasan video singkat tentang UXPin Merge
  Sebagai bagian dari “Sistem Desain Interaktif: Webinar dengan Johnson & Johnson”.
• Desain dengan Kode: Tutorial Penggabungan UXPin
  Tutorial pengantar UXPin dengan teknologi Merge.
• Desain Responsif dengan UXPin Merge
  Panduan untuk membuat prototipe pengalaman yang sepenuhnya responsif dengan UXPin dengan teknologi Merge.