Alat desain kehabisan jalur. Inilah cara kami memperbaikinya.

Jarang sehari berlalu dimana saya tidak menghabiskan setidaknya beberapa waktu untuk memikirkan alat desain. Beberapa tahun yang lalu, saya membangun alat desain yang diakuisisi oleh Marvel. Itu sudah lebih dari dua tahun yang lalu tetapi sejak itu lanskap tidak banyak berubah, juga tidak ada hasrat saya untuk memperbaikinya.

Baru-baru ini, saya tweeted tentang alat desain - sesuatu yang telah diketahui terjadi dari waktu ke waktu.

Saya bukan satu-satunya yang mengutarakan pikiran saya hari itu, yang lain ikut berdiskusi.

28 Juli 2017 bukan hari yang baik untuk alat desain.

Ada banyak wawasan hebat yang terkubur di utas-utas Twitter ini tetapi untuk waktu yang lama, saya ingin meluangkan waktu untuk menyelami apa yang saya pikir sangat terpecah secara mendasar tentang model alat desain saat ini, juga sebagai petunjuk arah saya pikir kita harus menuju.

Kita semua hanya menggambar. Ini gila.

Hampir semua alat desain populer mengekspor ke gambar. Ini bermasalah karena sejumlah alasan:

  1. Anda tidak dapat berinteraksi dengan gambar. Alat prototipe memberdayakan kami untuk menambahkan transisi layar dan interaksi sederhana ke gambar. Namun, karena produk kami terus menuntut transisi layar yang lebih maju dan interaksi mikro, gambar tidak dapat mengikuti.
  2. Gambar tidak cair. Mengkomunikasikan keputusan desain yang responsif melalui gambar biasanya merupakan tugas yang sulit.
  3. Gambar tidak stateful. Agar dapat berkomunikasi secara efektif berbagai keadaan untuk UI, seringkali banyak gambar diperlukan.
  4. Gambar bitmap bergantung pada resolusi. Dengan munculnya perangkat retina, gambar kadang-kadang dapat membuat buruk.
  5. File gambar cenderung berat dan seringkali tidak praktis untuk disimpan, dikelola, atau dibagikan.

Selama alat desain terus mengekspor gambar, mereka tidak akan pernah dapat menghasilkan representasi akurat dari produk kami. Kurangnya akurasi ini menghambat komunikasi antara desainer dan pengembang. Selama desainer terus menggunakan media yang sangat tidak memadai untuk mengkomunikasikan pekerjaan mereka, pekerjaan itu akan selalu terbuka untuk salah tafsir.

Ini adalah poin yang sangat penting karena, pada intinya, hampir semua alat desain mengubah bentuk vektor menjadi gambar. Photoshop, Illustrator, Marvel, Adobe XD, Sketch dan Figma semuanya sama dalam hal ini. Namun gambar hanya dapat sebagian mengkomunikasikan maksud desain. Seiring produk kami terus mengadopsi dan mendukung interaksi yang kompleks, input suara, input video, augmented reality, virtual reality, sensitivitas suhu dll., Nilai yang diberikan alat ini akan berkurang dengan cepat. Desain berbasis gambar adalah jalan buntu.

Alat desain kami harus memanipulasi produk yang sebenarnya, bukan gambarnya.

Produk kami bersifat interaktif. Alat kami statis.

Saya menyentuh ini pada poin saya sebelumnya tetapi ini sangat kritis sehingga saya pikir saya akan menguraikan sedikit.

Pikirkan jumlah interaksi sederhana yang biasa di hampir semua produk kami namun tidak dapat dikomunikasikan melalui alat desain kami. Inilah daftar singkat dari atas kepala saya:

  • Melayang tombol
  • Memfokuskan input
  • Memeriksa kotak centang
  • Konten bertab
  • Area gulir
  • Indeks tab untuk status fokus
  • Pintasan keyboard

Tentu, beberapa fitur ini dapat ditiru dengan beberapa rekayasa hacky tetapi orang harus bertanya-tanya, apa masalahnya? Mengapa desainer tidak bisa hanya mendesain produk yang sebenarnya ?! Pada akhirnya, semua maket bisa dibuang, namun para desainer menghabiskan waktu berbulan-bulan untuk menyesuaikannya dengan sempurna. Waktu itu akan jauh lebih baik dihabiskan mengutak-atik produk yang sebenarnya.

Saya tidak akan pergi terlalu jauh ke lubang kelinci "seharusnya desainer kode" tapi saya tidak menyarankan kita semua menulis kode. Saya hanya mengatakan tidak ada alasan mengapa alat desain kami tidak dapat mendukung manipulasi langsung produk langsung kami.

Framer melakukan pekerjaan yang lebih baik daripada kebanyakan di departemen ini, mendukung interaksi lanjutan dan terperinci. Sisa paket sangat jauh di belakang.

Alat kami harus mendukung paradigma tata letak web

Sampai sekitar setahun yang lalu, satu-satunya cara untuk membangun tata letak di web adalah dengan menggunakan tampilan: tabel dan properti CSS vertikal-rata. Sekarang kami memiliki Flexbox dan kami akan segera memiliki kotak CSS. Ketiga mesin tata letak ini berfungsi sangat mirip, memanfaatkan aliran DOM. Hampir semua situs web dibangun menggunakan salah satu dari tiga sistem tata letak ini.

Jadi, masuk akal bahwa alat desain kami mendukung model tata letak yang sama. Baik?

Yah, hampir semua alat desain mengabaikan sistem tata letak ini, alih-alih memilih untuk memposisikan setiap lapisan secara mutlak dalam artboardnya. Ini membuka jurang antara bagaimana fungsi web dan bagaimana fungsi alat desain kami, memperkenalkan banyak masalah:

  • Desain responsif menjadi sangat sulit karena setiap lapisan harus disusun ulang secara manual untuk setiap breakpoint. Atau, sistem tata letak berbasis kendala dapat diperkenalkan tetapi yang menambah kompleksitas, mempertajam kurva belajar dan akhirnya mencegah pengembang mentransfer tata letak langsung ke web.
  • Karena setiap lapisan berada di luar alur dokumen, memanipulasi konten menjadi rumit. Misalnya, jika Anda ingin menambahkan item ke daftar, Anda harus memposisikan item lainnya secara manual dalam daftar itu. Tentu saja, fungsi berulang dan fitur mewah lainnya dapat diperkenalkan untuk mengurangi rasa sakit, tetapi sekali lagi, ini menambah kompleksitas dan mempersulit sesuatu yang DOM berikan kepada kita secara gratis.
  • Penentuan posisi absolut secara alami mengarah pada koordinat dan dimensi piksel yang tetap. Ini melahirkan fleksibilitas dan, sekali lagi, merupakan perubahan besar dari fungsi web. Web dibangun di atas unit cairan seperti em, rem, vh, vw dan%. Alat kami harus mendukung unit ini secara default.

Alat desain seharusnya tidak perlu menyerupai atau mencerminkan web dan nuansanya - mereka seharusnya MENJADI web.

Alat monolitik bukanlah caranya

Desain yang baik terjadi secara bertahap. Sistem desain yang terstruktur dengan baik memiliki beberapa lapisan berbeda:

  1. Palet gaya Kumpulan warna, bayangan, spasi, jari batas, tipografi, ukuran font, animasi, dan gaya lain yang membentuk identitas merek Anda. Saat ini, sebagian besar alat desain hanya mendukung palet warna. Sampai mereka mendukung properti gaya lainnya, akan sangat sulit untuk mendesain secara sistematis.
  2. Aset Ini mencakup elemen-elemen seperti ikon, ilustrasi, dan gambar. Ada beberapa editor gambar yang fenomenal di luar sana dan alat vektor Figma sangat baik tetapi ketika datang ke dukungan SVG, alat desain kami meninggalkan banyak yang harus diinginkan.
  3. Pustaka komponen Komponen adalah kumpulan gaya dan aset yang merender data ke elemen tunggal dalam berbagai variasi. Contohnya termasuk tombol, input, lencana dll. Seperti yang saya sebutkan, Figma dan Sketch baru-baru ini mengabstraksi proses ini dari aliran gambar utama - sangat disayangkan mereka hanya gambar komponen dan bukan komponen sebenarnya.
  4. Modul Modul / komposisi adalah kumpulan komponen yang merender data ke bagian UI terenkapsulasi di berbagai negara. Contoh mungkin termasuk bilah header, menu tab, formulir masuk, tabel dll. Karena modul hanya komponen yang kompleks, saya menduga Figma dan Sketsa dapat menangani ini juga. Meskipun mungkin ada beberapa manfaat untuk memisahkan keduanya.
  5. Layar Layar adalah kumpulan modul, komponen, dan data untuk membentuk UI lengkap yang dapat berinteraksi dengan pengguna.

Sebagian besar alat desain menyediakan fitur yang setidaknya mendukung masing-masing tahap desain ini. Masalahnya adalah bahwa semua tahapan digabungkan. Hampir semua alat desain hanya menawarkan satu mode - mode menggambar. Anda membuat satu set artboards dan mulai menggambar. Hanya baru-baru ini saja alat seperti Sketch dan Figma mengabstraksi komponen / simbol dari mode gambar utama - yang aneh karena dalam pengembangan front-end, komponen telah diabstraksikan selama bertahun-tahun.

Saat mendesain palet gaya, saya tidak perlu melihat artboards atau alat vektor. Saya ingin melihat alat untuk memilih warna yang harmonis. Saya ingin preset untuk hal-hal seperti skala jarak 8dp atau pilihan jenis skala.

Merancang ikon membutuhkan cara berpikir yang sangat berbeda untuk merancang aliran pengguna. Editor SVG sederhana yang memungkinkan saya untuk menggambar persegi panjang SVG asli, lingkaran, garis dan jalur, kemudian diekspor kode SVG dioptimalkan akan ideal.

Saat mendesain komponen, saya seharusnya tidak lagi memikirkan gaya individu - saya hanya harus memilih gaya dari palet gaya yang telah saya tetapkan sebelumnya. Saya tidak bisa hanya memulai gaya tweaker untuk satu komponen karena itu akan memperkenalkan inkonsistensi, menipiskan efektivitas sistem desain saya. Setelah palet gaya di tempat, itu hanya dapat diedit di sumbernya.

Demikian pula, saat membuat modul, saya hanya harus terkena perpustakaan komponen yang telah saya tetapkan. Seharusnya tidak ada properti style di sidebar. Tidak ada alat vektor. Hanya pustaka komponen yang dapat digunakan kembali yang dapat saya seret dan lepas untuk menyusun modul.

Hal yang sama berlaku untuk penulisan layar. Pada titik ini, kami hanya menggunakan kembali komponen dan modul untuk membangun UI. Kami tidak memikirkan gaya atau bentuk atau upaya kreatif lainnya. Kami terutama berfokus pada perancangan konten dan arus pengguna.

Masing-masing tahap desain ini dapat terjadi dalam alat yang terpisah sepenuhnya atau hanya mode yang berbeda dalam alat yang sama. Saya pikir itu tidak penting. Satu hal yang pasti, sebagian besar alat desain saat ini gagal untuk mengakui prosesnya.

Alat kami harus mendorong desain yang baik

Desainer memiliki kemewahan yang langka untuk dapat menambahkan jumlah gaya unik yang tak terbatas ke proyek tanpa dampak yang nyata. Perlu ukuran font yang sedikit lebih besar? Hanya menabraknya. Bukan masalah besar. Butuh warna yang sedikit lebih cerah? Hanya men-tweak saja. Itu keren. Anda bahkan dapat membuat beberapa artboards dalam proyek yang sama, masing-masing menggunakan nilai yang sedikit berbeda untuk gaya yang sama dan mungkin tidak akan diperhatikan.

Alat desain Anda tidak akan pernah memberi tahu Anda bahwa Anda tidak dapat melakukan sesuatu. Tidak akan pernah menarik Anda untuk menggunakan warna off-brand. Itu tidak akan pernah mencegah Anda menggunakan nilai spasi putih yang tidak termasuk dalam skala jarak Anda. Tidak akan pernah memperingatkan Anda bahwa 20% populasi benar-benar tidak dapat melihat teks abu-abu terang yang baru saja Anda desain.

Dan kenapa tidak…? Karena alat desain tidak peduli.

Alat desain begitu patuh terpikat dengan visi untuk kreativitas tanpa batas sehingga mereka kehilangan pandangan tentang apa artinya mendesain secara masuk akal, untuk merancang secara inklusif, untuk merancang secara sistematis.

Sederhananya, alat desain memungkinkan kita untuk melakukan apa pun yang kita inginkan. Pada tingkat tertentu, tingkat kreativitas tanpa batas ini bermanfaat, terutama dalam fase ideasi. Namun, sebagai perancang UI, sebagian besar alur kerja kami tidak membutuhkan banyak kreativitas. Alih-alih, alur kerja kami membutuhkan penggunaan kembali, pengulangan, keakraban, dan standardisasi; membutuhkan alat kami melakukan sedikit untuk memuaskan.

Kebebasan tak terbatas ini bertentangan dengan realitas pengembangan web. Karena pengembang bekerja dengan produk yang sebenarnya, mereka semua harus bekerja dengan kode yang sama. Pengembang tidak bisa begitu saja menambahkan ukuran font terisolasi atau nilai warna acak ke basis kode. Pertama, linter (pesan peringatan yang memperingatkan tentang kode yang ditulis dengan buruk) kemungkinan akan mulai berteriak segera. Jika tidak, maka keahlian buruk mereka mungkin akan ditangkap selama peninjauan kode. Jika entah bagaimana berhasil menyelinap melalui celah, dampak kinerja yang nyata akhirnya akan membunyikan alarm.

Salah satu masalah paling mengganggu yang saya lihat pada tim produk adalah pemutusan antara tim desain dan pengembangan. Pengembang telah bekerja dengan pedoman dan batasan ketat selama bertahun-tahun. Kecuali jika alat desain kami mengadopsi kendala yang sama ini, kesenjangan tidak akan pernah menyempit.

Kita harus mendesain dengan data langsung

Data langsung telah dimasukkan sampai batas tertentu oleh banyak alat, yang bagus untuk dilihat. Adobe XD memiliki beberapa fitur yang sangat bagus untuk menghasilkan data palsu yang menyerupai data langsung yang khas. Invision Craft juga menyediakan beberapa fitur data langsung yang keren untuk Sketch.

Data langsung tidak boleh berhenti dengan teks. Elemen lain seperti gambar dan video dapat memiliki dampak besar pada pengalaman pengguna dengan secara signifikan meningkatkan waktu pemuatan. Jika Anda bekerja di web, alat pengembang peramban memungkinkan Anda untuk membatasi koneksi agar menyerupai berbagai kecepatan internet. Kemudian, Anda dapat melihat secara langsung bagaimana sepotong konten baru dapat memengaruhi pengalaman pengguna.

Apakah alat desain kami memberi kami kemewahan ini?

Dalam satu kata: tidak.

Semakin dekat kita merancang produk yang sebenarnya, semakin bermanfaat dan berdampak pekerjaan desain kita.

Web terbuka. Alat kita juga harus demikian.

Salah satu hal yang sangat indah tentang web adalah aksesibilitasnya yang terbuka. Situs web dapat dilihat di peramban web apa saja di perangkat apa pun.

Bagaimana itu dibandingkan dengan alat desain? Nah, beberapa hari yang lalu, kakak saya David meminta saya untuk meninjau desain aplikasi yang sedang dia buat. Dia mengirimi saya file Sketsa. Ketika saya membukanya, ini terjadi ...

Sebagian besar alat desain adalah kebun berdinding. Jika satu kolega bekerja di Photoshop, kolega lain tidak dapat membuka proyek itu di Sketch. Bahkan tidak cukup untuk membuat seluruh tim Anda menggunakan alat yang sama - mereka juga harus menggunakan versi yang sama dari alat itu.

Marvel dan Figma melakukan pekerjaan dengan baik di sini, menawarkan paket gratis dan fitur kolaborasi inovatif.

Jadi, bagaimana masa depan alat desain?

Inovasi dalam desain alat sangat berharga dan ada banyak hal baru-baru ini. Di alat desain Airbnb, Jon Gold dan Benjamin Wilkins telah mengerjakan React-Sketchapp yang mengambil komponen React dan menjadikannya di dalam Sketch. Jon dan Ben juga telah mengerjakan alat baru yang menakjubkan yang mengambil sketsa serbet dan mengubahnya menjadi komponen Bereaksi.

Adam Morse, Brent Jackson dan John Otander sedang mengerjakan serangkaian alat di Compositor yang pada dasarnya menyelesaikan semua masalah dalam artikel ini dan mungkin dunia.

Saya sedang mengerjakan Modulz, alat desain baru dan sistem desain open-source yang juga bertujuan untuk menyelesaikan masalah yang saya sebutkan di artikel ini. Jika Anda tertarik, ikuti di Twitter untuk pembaruan.

Sementara inovasi dalam perkakas penting, tantangan sebenarnya adalah pendidikan. Komunitas desain sama sekali tidak siap untuk alat desain yang sistematis. Banyak desainer memiliki sedikit atau tidak ada minat dalam membangun sistem. Bagi sebagian orang, JPG adalah tujuan akhir - yang disukai Dribbble.

Kita perlu entah bagaimana menginspirasi budaya akuntabilitas. Pengembang telah memiliki budaya akuntabilitas selama bertahun-tahun. Mereka memiliki alat untuk menjaga kodenya. Jika pengembang berulang kali menyimpang dari pedoman kode ketat mereka, Anda dapat yakin bahwa masalahnya akan diatasi.

Sementara itu, desainer sering mengumpulkan lapisan gunung dalam kekacauan lengkap dengan sedikit memperhatikan pemberian lapisan, pengelompokan, dan pemesanan. Ini sangat masing-masing untuk mereka sendiri. Karena output (gambar raster) tidak terpengaruh oleh input (layer vektor), tidak ada beban nyata yang harus diurus oleh desainer. Desainer sering memaafkan kurangnya pengorganisasian ini dengan meromantisasi seni desain, melukis diri mereka sendiri sebagai pesulap yang perlu dibiarkan menggunakan perangkat mereka sendiri untuk dapat tampil.

Kita juga harus menginspirasi budaya inklusi. Kita harus secara aktif mencegah malpraktek seperti warna teks ultra-ringan yang membuat teks sulit dibaca bagi banyak orang, atau tipografi kualitas super tinggi yang membuat laman web lambat dimuat, atau elemen UI tanpa pola yang membuat hal-hal sulit dipahami bagi orang buta warna. Saat ini, jenis malpraktek ini mendapat sambutan hangat di kalangan komunitas desain. Jika kita ingin menyambut alat desain yang cerdas, kita harus membalikkan budaya ini.

Jika alat desain yang sistematis adalah untuk memenangkan hati kita, itu harus dididik terlebih dahulu.