Apa perbedaan antara desain dan pengembangan web? Dan bagaimana dengan UI vs UX? Apa arti divisi-divisi ini? Mengapa ada begitu banyak akronim ?? Bukankah orang-orang teknologi ingin semuanya ramah pengguna !?

Jika Anda baru membuat situs web yang dirancang, menemukan terminologi industri teknologi bisa terasa seperti mendengarkan bahasa asing — kecuali sebagian besar bahasa asing memiliki rima dan alasan. Tetapi bekerja dengan profesional web adalah sesuatu yang harus dilakukan setiap bisnis di beberapa titik; jika Anda ingin situs web yang sukses, Anda mungkin memerlukan penerjemah.

Untuk itulah artikel ini dibuat. Jika Anda membuat situs web pertama Anda dirancang atau hanya ingin memahami industri dengan lebih baik, di sini kami menjelaskan dan membedah empat istilah yang paling banyak digunakan dan paling menyusahkan dalam teknologi saat ini: UI, UX, desain web, dan pengembangan web. Setelah membaca ini, Anda tidak hanya akan tahu apa yang dilakukan masing-masing bidang, tetapi juga bidang mana yang paling Anda butuhkan untuk menjadi fokus bisnis Anda.

ABC-nya TI
–

Mari kita mulai dengan beberapa definisi dasar untuk memudahkan kebingungan awal Anda dan memberikan beberapa konteks sebelum kita menyelam lebih dalam:

• Desain web – Kategori payung luas untuk segala sesuatu yang berkaitan dengan merancang visual dan kegunaan situs web. Baik desain UI dan UX, bersama dengan banyak bidang lainnya, termasuk dalam desain web.
• Pengembangan web – Bagian teknis pembuatan situs web, dengan fokus pada kode. Pengembangan web selanjutnya dibagi menjadi “front-end” dan “back-end,” dijelaskan di bawah ini.
• User Interface (UI) – Spesialisasi desain web yang berhubungan dengan kontrol yang digunakan orang untuk berinteraksi dengan situs web atau aplikasi, termasuk tampilan tombol dan kontrol gerakan.
• User Experience (UX) – Spesialisasi lain dari desain web, ini berhubungan dengan perilaku dan perasaan pengguna saat menggunakan situs atau aplikasi. Desain UX merangkum banyak area lain, tetapi melihatnya dari perspektif pengguna.

Seperti yang sudah Anda lihat, tidak satu pun dari area ini yang eksklusif dan ada banyak tumpang tindih. Desain dan pengembangan web hanya dua sisi dari mata uang yang sama, desain UI memengaruhi desain UX, pengembangan web mendukung semuanya … kurang tentang bidang mana yang menangani tugas mana, dan lebih lanjut tentang bagaimana masing-masing bidang menganggap tugas yang sama dari titik yang berbeda -melihat.

Misalnya, mari kita lihat waktu pemuatan , masalah umum untuk setiap situs web. Bagaimana setiap bidang memuat waktu:

• Desain web : Jika sebuah halaman membutuhkan waktu terlalu lama untuk memuat, ada terlalu banyak konten atau konten yang terlalu rumit. File gambar dapat dikompresi, aset dapat disesuaikan & diekspor kembali dan halaman dapat dipangkas dari konten berlebih.
• Pengembangan web : Untuk mempercepat pemuatan konten, kita dapat mencoba kompresi file yang lebih baik untuk mengurangi ukuran file konten, CSS sprite untuk menghemat bandwidth atau jaringan pengiriman konten untuk meningkatkan waktu pemuatan di wilayah geografis tertentu.
• UI : Kontrol harus responsif mungkin, sehingga antarmuka harus cukup sederhana sehingga interaktivitasnya instan.
• UX : Kemungkinan pengguna akan “memantul” (meninggalkan situs Anda setelah beberapa saat) meningkat dengan setiap detik waktu pemuatan, jadi kami harus memprioritaskan pengurangan waktu pemuatan di laman beranda dan laman landas terlebih dahulu sebelum menangani masalah di seluruh situs .

Di dunia yang sempurna, Anda akan menyewa spesialis atau tim spesialis untuk masing-masing bidang ini sehingga Anda memiliki pakar yang melihat situs web Anda dari semua sudut. Namun, kendala anggaran seringkali berarti memilih satu bidang dari yang lain, atau mempekerjakan freelancer  berdasarkan proyek per proyek.

Kadang-kadang Anda akan menemukan seseorang yang mengaku melakukan semuanya:

• Desainer yang dapat mengkodekan kadang-kadang melabeli diri mereka sebagai paket all-in-one, tetapi pada kenyataannya mereka lebih terbatas daripada dua spesialis yang terpisah (meskipun kadang-kadang ini mungkin merupakan perekrutan yang cerdas jika Anda memiliki situs yang sederhana).
• Desainer UI memiliki banyak keterampilan yang tumpang tindih dengan desainer web, sehingga beberapa orang akan menggunakan judul tersebut secara bergantian.
• UX dan UI sering disatukan, mengingat keduanya sub-spesialisasi.
• UX sering diperlakukan sebagai keterampilan dalam profesi lain, bahkan di luar desain, seperti manajemen produk.

Orang-orang semacam itu dapat berguna dalam keadaan darurat, tetapi ingatlah bahwa jack of all trade tidak menguasai apa pun — mereka mungkin tahu dasar-dasar berbagai bidang, tetapi mereka mungkin hanya akan ahli dalam satu bidang, jika ada.

Anda juga ingin membuat perbedaan antara situs web & aplikasi dan desktop & seluler. Setiap pekerja memiliki spesialisasi masing-masing — beberapa pengembang memiliki lebih banyak pengalaman membangun situs seluler; beberapa desainer secara eksklusif menempel pada aplikasi dan tidak pernah melakukan situs web. Sekali lagi, ada banyak tumpang tindih, tetapi jika Anda menyewa untuk proyek tertentu, pastikan kandidat Anda dapat menangani spesifik.

Jadi, salah satu dari spesialis ini yang dapat membantu Anda dengan tujuan bisnis khusus Anda? Dan apa yang harus Anda cari saat mempekerjakan mereka? Mari kita melihat lebih dalam pada masing-masing sekarang.

Desain web
–

“Desain web” adalah sedikit istilah kuno, yang berasal dari zaman ketika satu orang menangani semua aspek desain situs web. Dengan standar modern, istilah “perancang web” bisa agak kabur; hari ini, berkat teknologi dan meningkatnya pemahaman kita tentang kerajinan itu, kita memiliki pelangi subdivisi.

Subkategori desain web mencakup UI dan UX, tetapi juga akronim menyenangkan lainnya seperti IA (arsitektur informasi, yang berhubungan dengan pemetaan dan navigasi situs) dan CRO (pengoptimalan tingkat konversi, menyempurnakan desain situs untuk meningkatkan penjualan, pendaftaran, atau spesifik lainnya tindakan). Ada lusinan subkategori ini, dengan subkategori baru yang dibuat setiap hari saat para desainer mencoba mendapatkan pekerjaan yang lebih baik di pasar yang kompetitif.

Secara umum, desain web berkaitan dengan visual dan fungsionalitas situs web. Ini adalah bidang yang secara intrinsik terkait dengan desain grafis di setiap tingkat, dan berkaitan dengan prinsip – prinsip desain komunikasi visual yang sama.

Tetapi desain web lebih dari sekedar desain grafis. Baik bekerja dengan situs web atau aplikasi, desainer harus mengetahui fungsionalitas, kendala teknis, tren digital, dan harapan pengguna, yang sering berubah.

Ada juga tingkat pengetahuan bisnis dalam desain web: desainer harus memahami taktik penjualan digital, seperti cara menempatkan tombol “ajakan bertindak” (CTA) untuk memperoleh penjualan dan pendaftaran email. Tata letak situs sangat memengaruhi perilaku pengguna, tetapi karena sangat bernuansa, beberapa desainer lebih baik daripada yang lain.

Desainer web menangani masalah desain grafis tradisional seperti warna dan tipografi serta masalah digital seperti memilih estetika terbaik untuk ukuran layar yang berbeda. Mereka juga membutuhkan pemahaman tentang konsep bisnis seperti memimpin dan menutup untuk membuat tata letak yang membuat ajakan bertindak lebih menarik. Bagaimanapun, tugas seorang desainer terkadang termasuk membuat ikon, grafik atau tombol antarmuka dari awal, yang mengacu pada keahlian dari ketiganya.

Sejauh tanggung jawab pekerjaan tertentu, proses desain sebagian besar tergantung pada perancang, selama mereka bekerja dalam pedoman merek yang ada. Biasanya proses tersebut melibatkan perancang yang menciptakan prototipe desain, dan kemudian menguji prototipe tersebut dengan pengguna atau pemangku kepentingan yang sebenarnya, dan kemudian memasukkan umpan balik ke dalam desain masa depan.

Desainer juga dapat membuat wireframes , tata letak tanpa tulang dari desain untuk mempersiapkan prototipe, atau mockup , gambar pixel-sempurna dari apa yang akan terlihat seperti layar kecuali tanpa interaktivitas.

Setelah prototipe disetujui, itu dikirim ke pengembang untuk pengkodean.

Apa yang harus dicari saat merekrut seorang desainer web …

• Lebih dari segalanya, Anda harus tahu apa yang Anda inginkan sebelum dapat menemukan perancang web terbaik untuk Anda. Karena begitu banyak spesialisasi, ini bukan tentang apakah seorang desainer baik atau buruk, tetapi apakah itu cocok untuk Anda.
• Perhatikan portofolio mereka. Dengan penekanan pada desain grafis, masing-masing desainer web memiliki gaya artistik yang unik.
• Cari penguasaan aspek yang Anda hargai. Jika Anda memiliki situs yang penuh teks, lihat bagaimana mereka menangani tipografi, keterbacaan, dan tata letak halaman. Jika Anda membuat desain situs web e – niaga , lihat apakah mereka tahu apa yang membuat halaman produk yang bagus. Lihat perancang situs web e-niaga terbaik di sini.
• Apakah perangkat lunak pilihan mereka kompatibel dengan apa yang digunakan oleh tim Anda? Ada banyak perangkat lunak desain yang berbeda — Adobe Photoshop, Illustrator, InDesign dan Sketch, serta perangkat lunak prototyping seperti UXPin atau Balsamiq. Periksa dengan staf Anda yang lain untuk melihat apa pilihan Anda.
• Tanyakan desainer Anda tentang proses desain mereka dan kerangka waktunya. Semua desainer memiliki metode dan siklus desain sendiri, jadi periksa kembali apakah Anda merekrut seseorang yang sesuai dengan budaya perusahaan Anda dan juga jadwalnya.

Pengembangan web
–

Desain dan pengembangan web dibedakan oleh penggunaan kode. Pengembangan adalah hal-hal yang bersifat teknis, tetapi kabar baiknya adalah Anda tidak perlu tahu apa yang dibicarakan pengembang Anda selama mereka melakukannya (meskipun tentu saja membantu mempelajari dasar-dasarnya).

Pengembangan web dibagi menjadi dua kategori utama:

Front-end (alias sisi klien ): Kode untuk bagaimana situs web (atau aplikasi) ditampilkan di layar. Pengembang front-end bertanggung jawab untuk mewujudkan visi perancang web, biasanya menggunakan bahasa komputer seperti HTML, CSS, dan JavaScript. Secara alami, tidak semua yang direncanakan oleh perencana layak secara realistis, sehingga pengembang front-end sering bekerja bolak-balik dengan perancang.

Back-end (alias server-side ): “front-end” menarik dari sistem digital sumber daya yang di-host di server. Pengembang back-end mengelola sumber daya di belakang layar, mengkode data dalam database, dan mengoptimalkan cara pengiriman data. Mereka menggunakan bahasa seperti PHP, Ruby, Python, Java atau .Net.

Demikian pula, pengembang tumpukan penuh adalah seseorang yang dapat menangani pengembangan front-end dan back-end. Terkadang mereka adalah pilihan cerdas untuk pemula yang tidak mampu membeli lebih dari satu karyawan, tetapi idealnya Anda akan memiliki seluruh tim pengembang dengan beragam spesialisasi.

Apa yang harus dicari ketika menyewa pengembang web …

• Pastikan untuk melihat apakah mereka fasih dalam bahasa yang Anda butuhkan. Jika Anda tidak dapat membedakannya, beri tahu mereka apa yang ingin Anda lakukan dengan situs Anda dan dengarkan rekomendasi mereka.
• Meskipun tidak diperlukan, sangat membantu bagi pengembang untuk terlibat dengan proses desain. Misalnya, pengembang dapat memberi tahu pendahulunya terlebih dahulu jika pilihan mereka memungkinkan, menghemat waktu untuk revisi dalam jangka panjang. Anda mungkin ingin melihat seberapa baik pengembang Anda bekerja dengan tim, karena beberapa lebih suka bekerja secara mandiri.
• Tinjau situs web mereka sebelumnya melalui lensa fungsionalitas. Apakah semuanya berfungsi sebagaimana mestinya? Adakah bendera yang muncul? Anda mungkin tidak cukup tahu tentang pengembangan untuk memahami cara kerjanya, tetapi Anda tentu tahu bagaimana rasanya menjadi orang normal menggunakan situs.

Antarmuka pengguna (UI)
–

Sekarang kami telah menjelaskan desain dan pengembangan web, kami dapat mendiskusikan bidang yang lebih khusus, dimulai dengan desain antarmuka pengguna. UI adalah sesuatu yang digunakan semua orang tanpa memikirkan banyak hal — Anda tidak perlu tahu sejarah ikon hamburger untuk mengetahui bahwa tombol dengan tiga baris adalah menu Anda.

Dan itu adalah prinsip yang sedang berlangsung di sebagian besar bidang desain web: jika pekerjaan mereka dilakukan dengan baik, Anda seharusnya tidak memperhatikannya. Ini paling lazim dalam desain UI: dengan antarmuka yang benar-benar intuitif, pengguna tidak perlu memikirkannya untuk menggunakannya.

Jika Anda harus secara aktif memikirkan cara menggunakan kontrol, itu dianggap desain UI yang buruk. Mencari tombol yang Anda butuhkan atau menghabiskan beberapa detik mencari tahu apa yang dilakukan tombol keduanya mengalihkan Anda dari pengalaman keseluruhan menggunakan situs ini. Tujuan dari desain UI tidak hanya untuk menyediakan semua kontrol yang diinginkan pengguna, tetapi juga untuk membuat kontrol yang jelas yang dapat dimengerti pengguna secara sekilas.

Kekhawatiran lain adalah manajemen ruang. Desainer UI harus menemukan media bahagia antara memberi pengguna banyak pilihan dan menghemat ruang layar. Begitulah teknik seperti kontrol hover dan mengeluarkan menu muncul. Adalah tugas perancang UI untuk memutuskan kontrol mana yang perlu hadir setiap saat dan mana yang cukup diabaikan untuk disembunyikan atau diabaikan sepenuhnya.

Desain UI sering bertepatan dengan bidang lain yang disebut desain interaksi dengan singkatan “IxD”. Desain interaksi mengkhususkan diri dalam semua cara pengguna berinteraksi dengan sistem, termasuk antarmuka tetapi juga bidang-bidang seperti jendela sembul, obrolan dan kesalahan. Karena desain interaksi sangat menekankan perilaku pengguna, itu seperti titik setengah antara desain UI dan UX.

Apa yang harus dicari saat merekrut seorang desainer UI …

• Portofolio perancang UI harus memberi tahu Anda segala yang perlu Anda ketahui. Tes drive situs kandidat Anda sebelumnya dan lihat betapa mudahnya. Bisakah Anda menemukan semua yang Anda butuhkan? Apakah menggunakan situs / aplikasi itu membuat frustrasi atau mudah?
• Lebih-lebih daripada kategori lain, cari pekerjaan sebelumnya di jenis proyek tertentu yang Anda rekrut. Desainer UI situs web terbaik di dunia mungkin buruk dalam membuat antarmuka untuk aplikasi game. Pekerjakan seseorang yang memiliki pengalaman yang tepat.

Pengalaman pengguna (UX)
–

Dalam banyak hal, UX seperti bidang desain web dari perspektif pengguna. Bagaimana tata letak halaman web mempengaruhi pengguna? Bagaimana UI memengaruhi pengguna? Saat Anda maju ke tahap lanjut, UX menjadi jauh lebih strategis, seperti pada, “bagaimana kami merancang halaman untuk membuat pengguna ingin mendaftar?”

Seperti yang dapat Anda bayangkan, desain UX juga menggabungkan banyak bidang lain dalam desain web. Banyak orang berbicara tentang “UI vs UX,” tetapi kenyataannya adalah keduanya bekerja sama, bukannya bersaing. Bahkan, ada begitu banyak tumpang tindih sehingga semua jenis desainer web bisa mendapat manfaat dari mengetahui sedikit tentang UX. Itulah tepatnya bagaimana UX menjadi disiplin yang terpisah — merekrut seorang spesialis UX meringankan banyak tanggung jawab lain dari anggota tim lainnya.

Meskipun pada mulanya tampak berlebihan, sebenarnya ada korelasi langsung antara desain UX dan sasaran bisnis seperti penjualan atau konversi. Menimbang bahwa banyak pengambilan keputusan manusia berasal dari insting emosi dan usus, masuk akal bahwa mengoptimalkan desain situs web dapat mendorong perilaku tertentu dan menciptakan suasana yang lebih kondusif untuk perilaku tersebut.

Untuk alasan itu, desainer UX juga banyak memanfaatkan prinsip-prinsip desain grafis: menarik perhatian dengan ukuran, memunculkan emosi yang tepat dengan warna , menciptakan aliran visual yang dapat diprediksi di layar dan menempatkan CTA di tempat yang tepat. Namun, tidak seperti desain grafis tradisional, spesialis UX juga harus mempertimbangkan masalah tambahan seperti interaktivitas dan waktu, menjadikannya disiplin yang sepenuhnya terpisah dari yang lain, sementara secara bersamaan saling berhubungan dengan mereka semua.

Apa yang harus dicari saat merekrut desainer UX …

• Sama seperti dengan desain UI, Anda ingin “menguji drive” situs atau aplikasi sebelumnya dari kandidat Anda. Apakah mudah digunakan? Apakah Anda menikmati pengalaman menggunakan situs mereka?
• Jika Anda tidak memiliki anggaran untuk menyewa desainer UX yang terpisah, tanyakan kandidat di bidang lain tentang keahlian UX mereka. Tugas-tugas ini terkadang dapat ditangani sebagai upaya crossover dari berbagai tim; seorang manajer produk atau pemasar dapat menjelaskan apa yang mereka inginkan dari UX, dan kemudian tim desain menangani desain dan implementasi visual.

Bagaimana dengan situs templat?
–

Bagaimana jika Anda menggunakan situs templat seperti WordPress, Squarespace atau Wix? Apakah Anda masih membutuhkan tim yang lengkap? Apakah Anda membutuhkan orang tambahan?

Situs template mengikuti sebagian besar aturan yang sama, dengan beberapa pengecualian utama:

• Jika Anda menggunakan situs templat, Anda tidak perlu terlalu khawatir tentang pengembangan backend.
• Situs template biasanya memiliki opsi terbatas dan tetap untuk UI.
• Pastikan kandidat memiliki pengalaman di situs mana saja yang Anda hostingkan. Menjadi ahli di WordPress tidak selalu berarti menjadi ahli di Squarespace.

Selain pengecualian itu, menggunakan situs template mirip dengan situs lain mana pun. Pilih desainer Anda sesuai dengan apa yang paling Anda butuhkan.

Yang mana yang paling Anda butuhkan?
–

Sekarang, Anda harus dapat membedakan desain dan pengembangan web dan Anda tahu bahwa “UI vs UX” tidak seakurat “UI + UX.” Pertanyaannya adalah, yang mana yang paling harus Anda prioritaskan jika Anda tidak dapat menyewa spesialis untuk mereka semua?

Tidak ada jawaban universal untuk itu. Karena masing-masing bidang ini menangani bidang yang berbeda, semuanya tergantung pada kebutuhan unik perusahaan Anda. Mempertimbangkan tujuan dan kekurangan Anda sendiri, Anda mungkin perlu satu spesialis lebih dari yang lain.

Untuk membantu Anda memahami mana yang paling Anda butuhkan, berikut adalah daftar singkat masalah yang masing-masing bidangnya selesaikan. Temukan rintangan terbesar Anda di bawah ini dan lihat bidang yang sesuai untuk solusinya. Jika Anda sudah memiliki situs yang ada, lakukan beberapa tes pengguna sebelumnya untuk melihat keluhan apa yang dimiliki pengguna sebenarnya.

desain web

• situs tidak responsif (artinya situs tidak terlihat bagus di perangkat seluler)
• situs terlihat usang
• grafis berkualitas rendah
• pelanggan tidak pergi ke halaman yang Anda inginkan
• waktu di halaman terlalu pendek

pengembangan web

• bug (fungsi situs tidak berfungsi sebagaimana mestinya)
• keamanan web & pencegahan hack
• terlalu banyak 404 kesalahan
• terlalu banyak pencarian DNS yang gagal
• situs menjadi offline
• konten tertentu gagal dimuat

UI

• navigasi yang buruk
• kurangnya opsi penyesuaian
• kurangnya opsi berbagi sosial
• keluhan tentang “bagaimana saya melakukan ini” atau “di mana saya dapat menemukan itu”

UX

• tingkat konversi yang buruk (banyak lalu lintas tetapi sedikit konversi)
• rasio pentalan tinggi (pengunjung pergi setelah beberapa detik)
• pengguna tidak menyelesaikan konten (video atau blog)
• kunjungan terfragmentasi, yaitu, pengguna pergi setelah satu halaman dan bukannya tinggal dan menjelajah

Tentu saja, beberapa masalah dapat diperbaiki dengan metode yang berbeda, seperti yang kami jelaskan dengan contoh waktu pemuatan yang lambat di atas. Itulah mengapa penting untuk mengetahui aspek apa yang ingin Anda prioritaskan, sehingga solusi apa pun yang Anda pilih paling sesuai dengan prioritas Anda.

sumber:99designs.com