Panduan Komprehensif Untuk Desain UI

( Ini adalah artikel bersponsor .) Dengan gambaran besar yang ditetapkan — memetakan perjalanan pengguna dan menentukan tampilan dan nuansa desain Anda — artikel kelima saya dalam rangkaian sepuluh artikel ini menyelami detail mendesain komponen antarmuka pengguna.

UX, IA, UI: Semua singkatan ini bisa membingungkan. Pada kenyataannya, sebagai desainer, kami akan sering bekerja di berbagai spesialisasi ini: merancang keseluruhan pengalaman pengguna (UX), mengatur informasi secara logis saat kami mempertimbangkan arsitektur informasi (IA), dan mempertimbangkan desain granular antarmuka pengguna (UI) .

Dalam panduan saya untuk desain UX, saya mengeksplorasi kebutuhan untuk memahami kebutuhan pengguna dan mempertimbangkan perjalanan pengguna, kebutuhan untuk mendesain dengan mempertimbangkan perilaku manusia, dan kebutuhan untuk membangun estetika keseluruhan. Dalam artikel ini, saya akan menjelajahi detailnya, bagaimana kita mendesain antarmuka yang konsisten dan skalabel . Tujuan kami pada fase proses desain ini adalah untuk menerapkan apa yang telah kami pelajari ke desain antarmuka pengguna kami dengan:

• Menggunakan benchmarking untuk mengembangkan inventaris antarmuka yang memastikan antarmuka pengguna Anda dipertimbangkan secara kohesif dan konsisten;

• Membangun perpustakaan pola, yang diinformasikan oleh inventaris antarmuka Anda, untuk memastikan bahwa apa yang Anda desain hemat biaya dan konsisten; dan

• Merangkul animasi sebagai cara berkomunikasi dengan pengguna, meningkatkan desain kami pada tingkat fungsi dan kesenangan.

Singkatnya, artikel ini dimaksudkan untuk membantu Anda mengembangkan pendekatan sistematis terhadap desain antarmuka pengguna yang dapat diterapkan secara luas di berbagai proyek, dan dapat diskalakan. Dengan membangun kerangka kerja untuk desain, kami dapat menerapkan pelajaran dari orang lain, sehingga meningkatkan desain kami dan menghasilkan hasil yang lebih baik bagi pengguna kami.

Desain antarmuka pengguna (UI) adalah topik yang luas jadi pertimbangkan artikel ini sebagai primer singkat, tetapi — seperti dalam artikel saya sebelumnya — saya akan memberikan beberapa bacaan yang disarankan untuk memastikan Anda tercakup dengan baik.

Memulai Dengan Inventaris Antarmuka

Anda mungkin memulai dari awal yang bersih dengan produk baru atau mengunjungi kembali produk yang sudah ada, tetapi akan membantu untuk memulai dengan membuat inventaris antarmuka. Sama seperti inventaris konten membantu memastikan konten (yaitu kata, gambar, dan jenis konten lainnya) konsisten, inventaris antarmuka juga memastikan bahwa antarmuka pengguna dikembangkan secara konsisten dalam kerangka kerja yang komprehensif dan dipertimbangkan.

Menghabiskan sedikit waktu di awal ini akan menghemat banyak waktu dalam jangka panjang dengan membangun sistem desain yang konsisten di seluruh anggota tim dan yang mudah diskalakan. Membangun inventaris antarmuka membantu Anda memfokuskan waktu dan upaya Anda pada elemen yang Anda butuhkan saat ini, tetapi — seperti panduan gaya — itu harus menjadi dokumen hidup yang dapat diperluas, tumbuh seiring pertumbuhan produk Anda.

Jadi, apa sebenarnya "persediaan antarmuka" itu? Nah, istilah itu diciptakan dan dipopulerkan oleh Brad Frost. Dibutuhkan gagasan yang mendukung inventaris konten dan memetakannya ke dunia desain antarmuka pengguna. Seperti yang dirangkum Frost:

"Inventaris antarmuka mirip dengan inventaris konten, hanya saja alih-alih memilah-milah dan mengkategorikan konten, Anda mengambil stok dan mengkategorikan komponen yang membentuk situs web [atau produk] Anda. Inventaris antarmuka adalah kumpulan lengkap dari potongan-potongan yang membentuk antarmuka Anda."

— Inventaris Antarmuka, Brad Frost

Jika Anda mendesain ulang produk yang sudah ada, inventaris antarmuka dimulai dengan memetakan semua komponen Anda — tidak peduli seberapa besar atau kecil — sehingga mereka didokumentasikan secara sistematis. Jika Anda memulai proyek baru, Anda mungkin ingin memetakan produk pesaing, melakukan analisis pekerjaan orang lain. Ini membantu Anda memahami berbagai komponen antarmuka yang perlu Anda pertimbangkan.

Tahap pertama dalam proses ini adalah mengambil tangkapan layar secara sistematis dari semua yang telah Anda rancang . Ini akan memakan waktu, tetapi ini penting. Pada tahap ini — terutama jika Anda memiliki tim desain yang cukup besar — ​​Anda mungkin mulai melihat ketidakkonsistenan dalam bagaimana elemen yang berbeda telah dirancang. Inventaris antarmuka Anda akan membantu Anda mengidentifikasi elemen-elemen ini, yang kemudian dapat Anda perbaiki.

Pertimbangkan semua komponen berbeda yang membentuk antarmuka pengguna Anda, termasuk:

• Tipografi

  • Judul dan Sub Judul
  • Elemen Teks (Pertama, Paragraf)
  • Daftar

• Gambar dan Media

  • logo
  • Ikonografi
  • Gambar-gambar

• Formulir

  • Masukan Teks
  • Input Radio / Kotak Centang
  • Pilih Menu

Jika Anda seperti saya yang lama ( sebelum saya tahu lebih baik! ), Anda mungkin telah merancang komponen-komponen yang berbeda ini ketika dan ketika diperlukan, tanpa pendekatan sistematis apa pun. Ide inventaris antarmuka adalah untuk memaksakan pesanan ke proses ini memastikan semuanya konsisten.

Tahap kedua dari proses, mengkategorikan semuanya, dimaksudkan untuk memaksakan beberapa urutan pada tangkapan layar yang Anda ambil. Anda dapat mengatur tangkapan layar Anda menggunakan segala macam alat, tetapi saya sarankan mengatur semuanya menggunakan Keynote atau PowerPoint, dengan cara itu Anda dapat mempresentasikan pekerjaan ketika sudah selesai ke tim Anda. Brad Frost yang selalu membantu telah menyediakan template yang dapat Anda gunakan (ZIP).

Dengan pekerjaan di atas yang dilakukan, ada baiknya untuk berkumpul sebagai tim atau dengan klien dan menjalankan semuanya. Diskusi ini akan mengarah pada pemahaman yang lebih baik tentang berbagai komponen yang perlu Anda rancang. Ini juga cenderung mengarah pada beberapa perampingan komponen Anda yang berbeda dengan mengidentifikasi pola bersama — kemenangan besar untuk efisiensi.

Bangun Perpustakaan Pola

Dengan inventaris antarmuka yang dilakukan dan semua komponen Anda terorganisir, penting untuk mulai mengidentifikasi pola desain umum dan membangun di sekitar ini . Inventaris antarmuka Anda kemungkinan telah mengungkapkan inkonsistensi yang mencolok dalam desain Anda, sekarang adalah titik dalam proses desain yang Anda atasi dengan membangun kembali UI Anda secara modular. Saya merasa terbantu untuk menganggap pendekatan ini agak seperti LEGO.

Dengan LEGO, Anda dapat (dengan menggunakan komponen kecil) membuat hal-hal yang sangat rumit. Antarmuka serupa. Meskipun pada pandangan pertama sebuah antarmuka mungkin sangat kompleks, pada dasarnya terdiri dari komponen yang lebih kecil. Komponen-komponen ini adalah tempat perpustakaan pola masuk. Jadi, apa itu perpustakaan pola?

Pustaka pola mengidentifikasi dan mengklasifikasikan pola desain yang merupakan solusi berulang untuk masalah desain tipikal. Ini mungkin:

• Pemilih Kalender
• Jalur Remah Roti
• Korsel

Pustaka pola memecah antarmuka menjadi elemen yang lebih kecil yang kemudian dapat digunakan sebagai blok pembangun yang dapat digunakan kembali. Manfaat dari pendekatan ini meliputi:

• Konsistensi dalam desain Anda
  Dengan membangun elemen antarmuka pengguna yang kompleks menggunakan komponen yang lebih kecil dan dapat digunakan kembali, Anda memastikan bahwa semua elemen antarmuka pengguna Anda konsisten karena semuanya dibuat dari komponen sederhana yang sama.

• Kosakata visual yang dapat Anda bagikan ke seluruh anggota tim
  Dengan membuat pustaka pola untuk produk Anda, semua orang di tim Anda menggunakan itu sebagai dasar, daripada membangun elemen ad-hoc mereka sendiri.

• Efisiensi dari waktu ke waktu saat desain Anda berkembang
  Bahkan jika produk Anda tumbuh dari waktu ke waktu, pemeliharaannya efisien karena dibangun di atas pustaka pola inti.

Saat mendesain antarmuka pengguna Anda, akan sangat membantu untuk merujuk ke pola desain orang lain untuk melihat apa yang berhasil — dan juga — apa yang tidak. Pola UI adalah sumber yang bagus untuk melakukan ini, mengumpulkan banyak pola desain.

Dengan menggunakan inventaris antarmuka Anda sebagai titik awal untuk mengidentifikasi pola desain umum, Anda selangkah lagi untuk membangun komponen yang perlu Anda buat untuk membangun sistem desain. Ini akan membantu memastikan UI Anda konsisten dan skalabel.

Merangkul Desain Atom

Sebelum menyelam sedikit lebih dalam dan menjelajahi prinsip-prinsip desain atom, penting untuk memberikan sedikit kredit di mana kredit jatuh tempo. Andy Clarke telah menulis dan berbicara tentang "mendesain sistem, bukan halaman" untuk beberapa waktu sekarang.

Wawasan Clarke — bahwa kita perlu berhenti mendesain halaman secara terpisah dan alih-alih fokus pada pembuatan sistem dari mana halaman-halaman itu dibuat — telah menginformasikan banyak tulisan yang muncul seputar pentingnya berfokus pada pola desain.

Kami beruntung bahwa sejumlah desainer telah mengambil tongkat estafet dan menjelajahi garis pemikiran ini secara mendalam. Buku Brad Frost tentang Desain Atom dan buku Alla Kholmatova tentang Sistem Desain keduanya dipenuhi dengan nasihat yang berguna dan harus dibaca. Saya akan sangat menyarankan mereka berdua.

Menekankan pentingnya mengadopsi pendekatan metodis terhadap desain antarmuka, Frost menyatakan:

"[Saya] tertarik pada apa yang terdiri dari antarmuka kami dan bagaimana kami dapat membangun sistem desain dengan cara yang lebih metodis.
Dalam mencari inspirasi dan paralel, saya terus kembali ke kimia. […] Semua materi terdiri dari atom. Unit-unit atom itu terikat bersama untuk membentuk molekul, yang pada gilirannya bergabung menjadi organisme yang lebih kompleks untuk akhirnya menciptakan semua materi di alam semesta kita.
Demikian pula, antarmuka terdiri dari komponen yang lebih kecil. Ini berarti kita dapat memecah seluruh antarmuka menjadi blok bangunan mendasar dan bekerja dari sana. Itulah inti dasar dari desain atom."

— Desain Atom, Brad Frost

Metodologi Frost menetapkan lima tingkat berbeda yang terdiri dari desain atom: atom, molekul, organisme, templat, dan halaman. Dengan membangun dari atom ke atas, kami membuat blok bangunan dasar desain yang memungkinkan kami membangun apa pun.

Kimia tidak pernah menjadi kelebihan saya, tetapi pada dasarnya:

1. Atom berkumpul untuk membentuk molekul;
2. Molekul-molekul ini bergabung untuk membentuk organisme;
3. Organisme ini kemudian digunakan sebagai dasar untuk pembuatan templat dan halaman (yang jelas non-kimiawi).

Singkatnya, kami membuat blok bangunan antarmuka kecil dan kemudian menggabungkannya untuk membuat elemen antarmuka yang semakin rumit. Manfaat desain atomik adalah Anda dapat memastikan konsistensi dengan menggabungkan elemen pada tingkat granular dan kemudian membangunnya.

Memulai dengan Kit UI

Sebagai desainer yang bekerja — sebagian besar — ​​di web, kami sangat beruntung menjadi bagian dari komunitas yang merayakan pendekatan bersama terhadap pekerjaan yang kami lakukan. Kami telah melihat ledakan Kit UI — kumpulan komponen antarmuka pengguna yang dirancang secara sistematis — selama beberapa tahun terakhir, membantu membuat hidup kita sedikit lebih mudah.

Tidak ada gunanya membuang waktu untuk menggambar ulang komponen UI umum ketika Kit UI dapat menghemat waktu dan tenaga Anda. Kit UI yang dirancang dengan baik dapat menjadi landasan produk digital, baik itu situs web atau aplikasi, memastikannya memiliki tampilan dan nuansa yang konsisten, serta identitas visual.

Adobe telah bermitra dengan serangkaian desainer terkenal di dunia untuk membuat beberapa Kit UI Adobe XD yang fantastis, yang layak untuk dijelajahi. Mereka juga telah menyediakan beberapa tutorial hebat tentang memulai desain Anda dengan Kit UI untuk membuat Anda siap dan berjalan.

Selain menawarkan sejumlah set ikon gratis (dirancang oleh Lance Wyman, Buro Destruct, dan Anton & Irene), mereka juga telah membuat satu set lengkap Kit UI gratis dengan templat yang dibuat sebelumnya untuk proyek web dan seluler.

Kit UI sangat membantu dan dapat menghemat banyak waktu dengan menyelamatkan Anda dari menggambar ulang elemen yang umum digunakan. Namun, catatan untuk berhati-hati, seperti halnya kit generik lainnya, ada bahaya jatuh ke dalam pendekatan berbasis template di mana satu desain sangat mirip dengan yang lain. Sangat penting untuk menggunakan kit Anda sebagai titik awal , di mana Anda melapisi tampilan dan nuansa yang Anda buat saat membuat kolase elemen Anda.

Merancang Interaksi Dan Animasi

Salah satu pembeda utama antara mendesain untuk layar dan cetak adalah bahwa ketika kami mendesain untuk layar, kami mendesain untuk media cair . Ini adalah perbedaan penting antara desain interaksi dan desain grafis.

Sebagai desainer interaksi, kami tidak mendesain kumpulan halaman statis, kami mempertimbangkan bagaimana halaman ini, dan elemen di dalam halaman ini, berinteraksi. Ini adalah perbedaan kritis dan salah satu yang sering diabaikan oleh sekelompok desainer grafis yang percaya bahwa peran mereka hanyalah merancang set halaman yang kemudian akan diteruskan dan 'dijahit bersama' oleh 'seseorang yang teknis.'

Dengan risiko melepaskan 'desainer harus mengkodekan' kaleng cacing yang terus-menerus muncul, sangat penting bagi desainer yang bekerja di media ini untuk memahami cara kerja media tersebut. Untuk benar-benar merancang pengalaman yang tak terlupakan, penting untuk meluangkan waktu untuk mempelajari prinsip-prinsip animasi. Untungnya, alat seperti Adobe XD mengabstraksi banyak kode yang harus dihadapi di masa lalu untuk merancang pengalaman interaktif yang imersif.

Saat mendesain untuk layar — pada dasarnya media yang lancar — sangat penting untuk mempertimbangkan bagaimana pengguna akan berinteraksi dengan apa yang Anda desain , dengan mempertimbangkan bagaimana transisi ditangani dari layar ke layar dan memberikan umpan balik yang berharga dalam komponen antarmuka pengguna. Kita perlu mempertimbangkan interaksi makro (pada level halaman) dan interaksi mikro (pada level objek).

Mendapatkan Dari A ke B

Dalam artikel saya sebelumnya, saya menjelajahi bagaimana kami dapat menggunakan cerita pengguna untuk mulai memetakan jalur melalui desain Anda pada tingkat tinggi. Pada titik proses ini, kita perlu fokus pada bagaimana pengguna berpindah di antara layar ini , melintasi dari A → B → C.

Di masa lalu, kita mungkin hanya berpindah antar layar dengan sedikit atau tanpa animasi sama sekali, dibatasi oleh perangkat yang kita gunakan saat itu. Namun, karena kekuatan pemrosesan di desktop dan perangkat seluler kami telah meningkat, demikian juga jumlah peluang yang diberikan kepada kami untuk merancang pengalaman yang lebih imersif.

Tentu saja, kami perlu menggunakan kekuatan baru ini dengan menahan diri, tetapi perangkat keras yang tersedia bagi pengguna kami sekarang memberi kami kesempatan untuk merancang interaksi yang menyenangkan. Inilah mengapa kami melihat peningkatan minat pada animasi selama beberapa tahun terakhir. Sebagai desainer, kami menanggapi alat yang kami miliki; seiring berkembangnya alat-alat itu, begitu pula desain kita.

Saat merancang transisi antar layar, kita perlu mempertimbangkan sejumlah faktor, termasuk:

• Bagaimana pengguna memicu transisi untuk berpindah dari halaman ke halaman
  Dengan mengklik tombol atau dengan menggesek layar.

• Jenis transisi apa yang kami gunakan
  Larut, lap, timbangan atau efek lainnya. Transisi yang kita pilih akan berkomunikasi dengan pengguna, jadi penting untuk memilihnya dengan hati-hati.

• Berapa lama transisi berlangsung?
  Apakah cepat atau lambat?

Saat kita merancang perjalanan dari A → B → C, pilihan yang kita buat (yaitu pemicu, transisi, dan pengaturan waktu) akan memengaruhi narasi, jadi penting untuk memikirkannya. Seperti halnya perjalanan apa pun, perjalanan akan lebih lancar jika menyenangkan.

Jenis konten yang kami desain juga akan berdampak pada keputusan ini. Dalam beberapa kasus, kami ingin pengguna bergerak sedikit lebih lambat melalui narasi dengan menggunakan transisi dan pengaturan waktu untuk mempercepat sesuatu. Dalam kasus lain, kami ingin menyingkir dengan mempercepat transisi.

Ketika Apple pertama kali meluncurkan iBooks, transisi halamannya saat membaca buku (efek 'page curl') memperlambat pembaca. 'Page curl' terlihat menyenangkan pada pandangan pertama, tetapi setelah Anda melihatnya ratusan kali — ketika semua yang ingin Anda lakukan hanyalah membaca buku — itu menjadi sangat membuat frustrasi. Mikrodetik yang digunakan pada setiap halaman berubah menjadi pengalaman yang membuat frustrasi.

Saat mendesain transisi antar layar, penting untuk tidak melupakan fungsionalitas yang mendasarinya. Pada akhirnya, tujuan kami adalah untuk menyenangkan pengguna kami, bukan untuk membuat mereka frustrasi .

Animasi bisa menyenangkan, tentu saja, tetapi tidak jika itu mengorbankan fungsionalitas. Sophie Paxton menulis tentang topik ini dalam sebuah artikel bagus berjudul Your UI is not a Disney Movie , yang menyoroti bagaimana animasi serampangan dan antarmuka pengguna yang terlalu beranimasi dapat, jika kita tidak hati-hati, membuat frustrasi pengguna. Sangat layak untuk dibaca.

Berinteraksi Dengan Objek

Dengan interaksi makro kita, pada tingkat halaman yang ditentukan, saatnya untuk mengalihkan perhatian kita ke interaksi mikro di tingkat objek.

Sama seperti kita perlu mempertimbangkan semua faktor yang ditambahkan untuk memudahkan pengguna dari halaman ke halaman, penting juga untuk memperhatikan kemudahan interaksi pengguna dengan objek tertentu dalam halaman kita. Ini mungkin termasuk tombol, bidang formulir, dan elemen lain di mana sedikit animasi yang bijaksana dapat membantu memberikan umpan balik kepada pengguna kami.

Memberikan umpan balik visual sangat penting dalam desain antarmuka pengguna: Ini membuat pikiran pengguna tenang dengan memberikan sinyal bahwa tindakan mereka telah diakui . Ketika saya mengklik tombol lampu di 'dunia nyata', saya menerima umpan balik dengan mendengar klik yang memuaskan serta hasil dari menyalakan atau mematikan lampu. Umpan balik ini membuat saya tahu apa yang terjadi.

Kami dapat meningkatkan desain antarmuka pengguna kami dengan menerapkan pelajaran ini dari dunia nyata ke dunia layar. Antarmuka pengguna yang dirancang dengan baik harus merespons tindakan pengguna , memberi tahu mereka bahwa tindakan mereka memiliki efek yang diinginkan, menenangkan pikiran mereka. Di sinilah animasi dapat memainkan peran penting.

Situs seperti UI Movement memberikan banyak inspirasi, menampilkan contoh efektif dari animasi yang diterapkan pada antarmuka pengguna. Penting untuk mempertimbangkan bagaimana Anda memberikan umpan balik dan dalam konteks apa, misalnya:

• Saat Anda meminta kata sandi, akan sangat membantu untuk menunjukkan kekuatan atau kelemahan kata sandi saat pengguna memasukkan informasi (hanya mengetahui kemudian bahwa kata sandi terlalu lemah membuat frustrasi).

• Saat pengguna berinteraksi dengan tombol, ada baiknya memberikan umpan balik, memberi tahu pengguna bahwa tindakan mereka telah diakui.

• Saat berinteraksi dengan pemilih tanggal dan kalender, ada banyak ruang untuk memberikan umpan balik yang bermanfaat.

Skenario di atas hanyalah puncak gunung es. Di mana pun pengguna Anda diminta untuk berinteraksi dengan elemen pada halaman adalah kesempatan untuk mempertimbangkan menggunakan animasi untuk memberikan umpan balik yang bermanfaat. Tentu saja, seperti yang saya sebutkan di atas, antarmuka pengguna Anda bukan film Disney, jadi jangan berlebihan!

Akhirnya, perlu dicatat bahwa animasi bukan untuk semua orang dan dapat — untuk beberapa orang — menyebabkan masalah. Untuk pengguna dengan gangguan vestibular, gerakan dapat menyebabkan pusing atau mual, jadi penting untuk mempertimbangkan aksesibilitas saat menggunakan animasi.

Mungkin ide untuk menawarkan pilihan kepada pengguna, dan itu bagus untuk melihat situs seperti CodePen World's Fair memperingatkan pengguna untuk menggunakan animasi dan menawarkan mereka pilihan untuk melanjutkan ke situs dengan atau tanpa animasi. Pertimbangan semacam ini bagus untuk dilihat: Bravo untuk aksesibilitas!

Dalam Penutupan

Saat merancang antarmuka pengguna Anda, ada baiknya memiliki sistem. Ini memastikan bahwa apa pun yang Anda bangun dipertimbangkan dan konsisten. Dimulai dengan inventaris antarmuka — terutama saat Anda meninjau kembali produk yang ada sebagai bagian dari desain ulang — akan membantu Anda mengidentifikasi titik di mana antarmuka Anda perlu bekerja. Seiring waktu, wajar saja jika inkonsistensi dapat muncul; alat ini menawarkan cara yang ideal untuk menunjukkan ini.

Ketika tiba waktunya untuk membangun antarmuka Anda, luangkan waktu untuk membangun sistem desain yang dipertimbangkan. Ini tidak hanya memastikan bahwa desain Anda konsisten, tetapi juga membantu menjaga tim Anda pada halaman yang sama dan memberikan semua pekerja lepas yang mengerjakan proyek dengan semua panduan yang mereka butuhkan di satu lokasi pusat.

Terakhir, penting untuk mempertimbangkan desain interaksi dan animasi Anda. Sebagai desainer yang bekerja untuk layar, penting bagi kami untuk mempertimbangkan bagaimana desain kami merespons interaksi pengguna. Bagaimanapun, kita sedang merancang untuk media yang dapat ditempa, mari gunakan kelenturan itu untuk kepentingan kita! Mengikat semua hal di atas bersama-sama, Anda akan memiliki dasar pendekatan antarmuka pengguna yang solid yang akan bertahan dalam ujian waktu.

Bacaan yang Disarankan

Ada banyak publikasi hebat, offline dan online, yang akan membantu Anda dalam petualangan Anda. Saya telah menyertakan beberapa di bawah ini untuk memulai perjalanan Anda.

Alla Kholmatova telah menulis buku yang sangat bagus tentang Sistem Desain , yang sangat saya rekomendasikan. Ini mengeksplorasi bagaimana membangun sistem desain yang efektif dapat memberdayakan tim untuk menciptakan produk digital yang hebat.

Brad Frost telah menulis panjang lebar tentang proses melakukan inventaris antarmuka. Dia juga telah menulis buku yang sangat bagus, Atomic Design , yang berfokus pada pembuatan sistem desain antarmuka yang efektif. Frost adalah cookie yang cerdas, dan saya sangat menyarankan untuk mem-bookmark blognya.

Jika Anda tertarik untuk mempelajari lebih lanjut tentang mendesain interaksi dan animasi, saya sangat merekomendasikan Sumber Daya Animasi dan UX Val Head. Kepala menjalankan lokakarya dan memiliki buletin email yang sangat baik juga.

Jika web adalah media Anda dan Anda baru mengenal animasi, tinggalkan semuanya dan daftar ke kursus Animasi CSS Donovan Hutchinson. Ini adalah kursus yang luar biasa, dan gaya mengajar Hutchinson tidak ada duanya.

Artikel ini adalah bagian dari seri desain UX yang disponsori oleh Adobe. Adobe XD dibuat untuk proses desain UX yang cepat dan lancar, karena memungkinkan Anda beralih dari ide ke prototipe lebih cepat. Desain, prototipe, dan bagikan — semuanya dalam satu aplikasi. Anda dapat melihat lebih banyak proyek inspiratif yang dibuat dengan Adobe XD di Behance, dan juga mendaftar ke buletin desain pengalaman Adobe untuk tetap mendapatkan informasi terbaru dan terinformasi tentang tren dan wawasan terbaru untuk desain UX/UI.