Keuntungan Webflow untuk Desain Web Tanpa Kode – Studi Kasus

Pengaya alat desain yang tak terhitung jumlahnya telah disusun untuk membantu memperlancar jalan bergelombang kolaborasi desainer-pengembang. Namun alur kerja desain web yang khas terus dipenuhi dengan inefisiensi dan menghambat kreativitas. Generasi baru tanpa kode, alat desain web visual menjanjikan untuk membebaskan desainer dari belenggu kreatif dan kebosanan pengembangan web tradisional.

Banyak platform pengembangan web tanpa kode baru-baru ini mendarat di lanskap desain seolah-olah manna dari surga. Desainer yang ingin "mendobrak penghalang kode" akhirnya dapat mengenali realitas masa depan tanpa kode yang utopis . Jika bintang-bintang sejajar, kebutuhan untuk menyerahkan desain kepada pengembang front-end dengan spesifikasi terperinci akan berakhir. Desainer akan memiliki kebebasan untuk mengatur elemen secara visual pada papan seni dan mengklik "terbitkan" dengan lega.

Sebelum tidak ada alat desain kode, desainer harus mengandalkan pengembang front-end untuk mengimplementasikan semuanya . Mengubah sepotong teks di situs web ke ukuran font yang berbeda bisa memakan waktu berhari-hari. Bahkan untuk situs web pemasaran kecil atau halaman arahan sederhana, desainer akan mengirimkan desain, duduk, menyilangkan jari, dan berdoa agar semuanya kembali sempurna. Prosesnya seperti menonton cat kering.

Merasakan peluang, pembuat situs web “tanpa kode” sekarang ada di mana-mana. Beberapa eksperimental, dan beberapa kuat dan mampu. Namun banyak yang masih kurang tayang dalam hal menawarkan kontrol kreatif tanpa batas. Hampir semuanya adalah platform yang tidak fleksibel, berbasis template, menargetkan bisnis kecil hingga menengah.

Sebagian besar desainer profesional mendambakan kemampuan untuk merancang dan membangun situs responsif dengan cepat, dengan kontrol kreatif mutlak dan tanpa menyentuh kode. Hari itu mungkin akan segera tiba karena medan pertempuran tanpa supremasi kode sekarang dipenuhi dengan beberapa pesaing serius: Editor X, Bubble, Ceros, dan Webflow.

Webflow memasuki keributan pada tahun 2013, dan selama bertahun-tahun, telah berkembang menjadi produk yang matang. Diluncurkan sebagai lulusan akselerator startup Y Combinator, Webflow berharap dapat mengganggu lanskap desain web tanpa kode dan membayangkan dunia “di mana setiap orang dapat membuat situs web yang kuat dan fleksibel semudah mereka membuat dokumen.”

Cara Mendapatkan Dukungan dari Pemangku Kepentingan

Saat desainer menemukan kemampuan platform ini, mereka segera menyadari bahwa perusahaan dari semua ukuran dapat mengambil manfaat dari mengadopsi alat desain web tanpa kode. Manfaatnya bisa signifikan, terutama untuk tim yang lebih kecil dengan sumber daya yang terbatas. Namun, tidak cukup tergila-gila dengan alat desain web baru; pemangku kepentingan perlu dibujuk untuk menyetujui peralihan.

Bagaimana desainer mewujudkannya? Saya adalah seorang desainer produk di startup B2B dengan satu pengembang yang berfokus pada produk inti. Perusahaan membutuhkan situs web pemasaran tetapi tidak memiliki sumber daya pengembang. Kami dihadapkan pada teka-teki: Bagaimana kami membangun situs web tanpa pengembang? Setelah menjelajahi Webflow dan mendapatkan kemahiran di dalamnya, saya menyadari bahwa saya dapat melakukannya sendiri .

Saya menghabiskan akhir pekan menerapkan desain di Webflow untuk pertemuan pemangku kepentingan pada hari Senin. Selama pertemuan, saya menjelaskan keunggulan Webflows dan menunjukkan betapa mudahnya beralih dari desain ke kode, membuat desain responsif, dan mengubah sesuatu dengan cepat. Merancang dan meluncurkan halaman web hanya akan memakan waktu beberapa hari.

Saya juga memamerkan kemampuan CMS Webflow dan kemudahan dalam menggabungkan SEO. Selanjutnya, saya menetapkan penghematan biaya dari seorang desainer tunggal yang mengimplementasikan semuanya tanpa biaya tambahan untuk melibatkan pengembang kami. Mereka dijual.

Ini juga merupakan kesempatan untuk mendapatkan kembali kendali kreatif penuh. Saya tidak lagi hanya seorang desainer yang membuat mock-up di Sketch dan menyerahkan desain ke pengembang. Paradigma baru ini mengubah saya menjadi pembangkit tenaga pengembangan web: Saya dapat merancang, membangun, menguji, mengubah, menggabungkan SEO, pengujian A/B, dan menerbitkan situs. Itu memberdayakan, dan itu memberi saya suara yang lebih kuat di perusahaan.

Studi Kasus Desain Webflow

Di Upvest, selain merancang produk inti perusahaan, saya juga bertanggung jawab atas branding visual. Ini termasuk situs web responsif perusahaan, yang perlu mengakomodasi pembaruan yang sering. Upvest adalah startup tahap awal, dan produknya masih berkembang. Karena itu, kami perlu membuat dan menguji A/B berbagai halaman pemasaran di sepanjang jalan. Kami juga perlu memposting artikel blog menggunakan sistem CMS dan meluncurkan halaman arahan khusus untuk berbagai promosi penjualan.

Selain itu, hal yang rumit adalah bahwa perusahaan telah membuat beberapa pivot pada hari-hari awal. Mulai dari menjual API, membangun dompet blockchain, hingga menawarkan “tokenisasi aset”, hingga perusahaan real estat. Akibatnya, saat kami terus maju, saya harus merancang berbagai halaman arahan di Webflow.

Klik untuk melihat gambar berukuran penuh.

Memulai dengan Webflow relatif mudah. Tutorial disediakan melalui Webflow University. Saya memiliki versi pertama situs web pemasaran kami yang dirancang dan dibangun dalam beberapa hari. Antarmuka drag-and-drop mudah digunakan, dan memeriksa desain untuk dimensi layar yang berbeda hanya dengan sekali klik. Bekerja dengan Webflow, saya juga belajar banyak tentang merakit halaman dengan benar dengan model kotak untuk tata letak responsif.

Setelah semua orang menyetujui branding visual situs web, saya membuat panduan gaya di Webflow yang dapat kita ikuti. Saya juga mengatur berbagai kelas dan simbol yang dapat digunakan kembali untuk pembuatan halaman berikutnya. Simbol Webflow bekerja dengan cara yang mirip dengan simbol Sketch dan komponen master Adobe XD. Ketika simbol diperbarui, semua contoh lain dari komponen itu dalam proyek mencerminkan pembaruan.

Setelah peluncuran situs web pertama, saya semakin nyaman dengan Webflow. Untuk melacak berbagai metrik, saya belajar cara memasang alat pengukuran, seperti Google Pengelola Tag dan Hotjar. Kecepatan saya dalam mengumpulkan berbagai aset pemasaran juga meningkat. Perusahaan perlu menguji berbagai macam tata letak dan konten saat produk berkembang, dan Webflow memungkinkan untuk mengubah desain dan ditayangkan dengan cepat tanpa harus bergantung pada pengembang.

Klik untuk melihat gambar berukuran penuh.

Karena Webflow menyediakan tautan pementasan untuk melihat pratinjau situs, pemangku kepentingan dapat memeriksa evolusi desain dan memberikan umpan balik segera. Setelah penyesuaian diformalkan, saya dapat membuat perubahan secara langsung di Webflow—daripada kembali ke alat desain seperti Sketch—dan mempublikasikan situs ke staging. Outputnya adalah semua kode, diposting ke situs pementasan segera, siap untuk putaran ulasan lainnya. Ketika semuanya baik-baik saja, saya memublikasikan situs ke domain perusahaan.

Seperti halnya dengan banyak desainer lain, alat desain pilihan saya adalah Sketch. Jika sudah siap, saya akan berbagi desain dengan berbagai pemangku kepentingan untuk ditinjau. Setelah mereka menyetujuinya, saya akan melanjutkan dan mengimplementasikannya di Webflow. Setelah beberapa saat, saya merasa sangat nyaman dengan Webflow sehingga saya tidak perlu menggunakan Sketch. Setiap kali ada proyek baru, saya akan langsung masuk ke Webflow. Alur kerja baru ini menghemat banyak waktu dan uang bagi startup yang kekurangan uang. Misalnya, saya membuat halaman arahan berikut sepenuhnya di Webflow untuk kampanye pemasaran guna menghasilkan prospek.

Untuk kebutuhan blog kami, saya membagikan beberapa dasar-dasar Webflow dengan para pemangku kepentingan dan menunjukkan kepada mereka cara menggunakan CMS-nya. Setelah mereka merasa nyaman dengan itu, mereka meng-upload artikel blog sendiri. Mengambil keuntungan dari fitur Koleksi CMS Webflow, saya telah menyiapkan sistem; mereka hanya perlu menambahkan konten untuk artikel dan menayangkannya.

Klik untuk melihat gambar berukuran penuh.

Memasukkan Webflow ke dalam Proses Desain

Memasukkan Webflow ke dalam proses desain sangatlah mudah. Terlebih lagi, banyak langkah desain tradisional dapat dihilangkan—terutama di bagian akhir. Tidak ada serah terima pengembang. Penghapusan fase terakhir ini saja menghemat banyak waktu—tidak ada lagi "redlining" dan pengerjaan spesifikasi.

Jika desainer terbiasa dengan wireframing, prototyping, dan desain UI dengan Sketch/XD/Figma, mereka mungkin merasa lebih nyaman dengan alur kerja tersebut. Namun, mereka mungkin ingin mempertimbangkan untuk langsung masuk ke Webflow , merakit desain, dan mengujinya langsung di browser dengan tautan staging—terutama untuk proyek yang lebih kecil. Ini semua tentang menyeimbangkan kebutuhan, karena bergantung pada cakupannya, membangun proyek di Webflow mungkin memakan waktu lebih lama daripada metode lain. Untuk eksperimen desain, seperti pengujian A/B atau pengujian multivarian, mungkin juga masuk akal untuk langsung masuk ke Webflow—desain, build, dan uji di sana.

Desainer dapat dengan cepat memulai proyek dengan memilih dari sejumlah templat Webflow yang berbeda dan menyesuaikannya. Semua template dibuat menggunakan Webflow tanpa menulis kode, dan dengan demikian, template tersebut sepenuhnya dapat disesuaikan dengan antarmuka pengembangan visual Webflow.

Komponen yang membentuk desain dapat diubah menjadi simbol Webflow, yang dapat digunakan kembali untuk merakit halaman berikutnya dalam hitungan menit. Seperti halnya Sketch, desainer dapat mengatur simbol, membuat bidang yang dapat diikat ke setiap komponen, dan menambahkan penggantian konten pada setiap instance. Ini berarti bahwa desainer dapat membuat komponen dengan judul, gambar, dan blok teks dan menggunakannya kembali di seluruh halaman dengan konten yang berbeda.

Webflow juga merupakan alat yang sangat baik untuk membangun sistem desain. Dengan rilis penggantian konten untuk simbol baru-baru ini, seluruh sistem desain dapat dibuat yang membantu tim membangun desain lebih cepat, tanpa mengorbankan atau mengurangi identitas visual atau nilai inti merek mereka.

Tidak ada alat kode yang mengurangi jumlah waktu dan keahlian pengkodean yang diperlukan untuk menerjemahkan ide menjadi sesuatu yang dapat digunakan orang. Anda tidak perlu lagi menjadi programmer untuk membangun sesuatu, memberdayakan gelombang pembuat baru dari latar belakang dan perspektif yang berbeda. Ryan Hoover, pendiri Product Hunt, dalam The Rise of No Code

Manfaat Webflow untuk Desain Web

Membuat situs web responsif di Webflow dapat terjadi dengan cepat karena antarmuka mengintegrasikan pengeditan dan pratinjau pada perangkat yang berbeda dengan mulus. Dengan satu klik, desainer dapat melihat bagaimana situs akan ditampilkan di desktop, tablet, dan seluler, dan mereka dapat menyesuaikan tata letak, komponen, dan font untuk setiap layar.

Keuntungan aliran web:

• Garis waktu terkompresi. Jalur yang lebih cepat dari ide ke desain, pembuatan prototipe, dan MVP.
• Webflow menjembatani kesenjangan desain-konten. Ini memberdayakan penulis, editor, dan pemasar untuk segera memperbarui konten di seluruh situs web.
• Desainer dapat membuat prototipe dengan ketelitian rendah atau tinggi di Webflow, melewatkan Sketsa, atau alat pembuatan prototipe lainnya. Setelah prototipe diuji, mereka dapat diubah menjadi produk akhir dengan cepat dan ditayangkan langsung di web.
• Bangun, host, dan pelihara beberapa situs dan halaman arahan.
• Gabungkan alat pengukuran, seperti Hotjar atau Google Pengelola Tag.
• Turunkan hambatan masuk bagi pemasar dan orang non-teknis lainnya.
• Pengeditan konten yang mudah oleh orang lain langsung di halaman melalui Webflow Editor.
• Webflow E-niaga memungkinkan desain dan penskalaan bisnis online yang cepat.
• Webflow memberikan konsistensi dan kecepatan desain dengan Templat Tim.
• Desainer dapat membangun situs dengan konten nyata dan memanfaatkan Koleksi CMS Webflow —template konten yang dapat digunakan tim lain tanpa keterampilan teknis.
• Pencadangan situs otomatis (versi) dan URL pementasan.
• Situs tidak perlu dihosting dengan Webflow. Karena semua situs web dikodekan dalam HTML, CSS, dan JavaScript standar, situs dapat diekspor dan diunggah ke host mana pun.
• Saat meninggalkan Webflow, seseorang dapat mengekspor database untuk penggunaan di masa mendatang, bersama dengan file HTML dan CSS.

Ringkasan

Manfaat bisnis yang tak terhitung jumlahnya dapat diwujudkan dengan menghilangkan kode untuk pengembangan web. Menjulang di atas alat desain web DIY di bawah standar, Webflow memberikan solusi menarik yang cocok untuk sebagian besar kebutuhan desain web profesional. Platform terus berkembang, dan ada perkembangan yang lebih menarik di jalan.

Saya seorang diri merancang dan meluncurkan situs web perusahaan dengan Webflow dalam waktu kurang dari dua bulan. Webflow memberikan fleksibilitas yang belum pernah ada sebelumnya dalam proses desain, menawarkan kontrol yang lebih kreatif tanpa harus mengkhawatirkan kode. Alur kerja desain web tanpa kode yang cepat menyediakan jalur yang lebih cepat untuk meluncurkan dan menurunkan biaya produksi hingga setengahnya dibandingkan dengan pengembangan web tradisional.

Kurva belajarnya tidak curam. Dalam beberapa minggu, semua seluk beluk Webflow dapat dikuasai dengan cukup dengan tutorial—cukup untuk mulai menyusun situs web yang lengkap. Setelah desainer mempelajari Webflow, mereka mungkin tidak akan pernah kembali ke cara tradisional pengembangan web.

Tidak ada alat desain web kode di sini untuk tinggal. Nilai dan fleksibilitas yang mereka berikan tidak perlu dipertanyakan lagi. Gerakan tanpa kode bertumpu pada keyakinan mendasar bahwa teknologi harus memungkinkan dan memfasilitasi penciptaan, bukan menjadi penghalang untuk masuk. Webflow memungkinkan desainer untuk merancang dan membangun produk yang rumit dalam waktu yang lebih singkat. Ini membantu desainer mengikuti kecepatan bisnis dan membuka dunia peluang bagi mereka yang tidak bisa membuat kode. Mungkin sudah waktunya untuk melompat ke kapal.

Beri tahu kami pendapat Anda! Silakan tinggalkan pemikiran, komentar, dan umpan balik Anda di bawah ini.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Animasi Web Di Era Pasca-Flash
• Kesederhanaan adalah Kunci – Menjelajahi Desain Web Minimal
• Desain Responsif – Praktik Terbaik dan Pertimbangan
• Desain Web Brutalis, Desain Web Minimalis, dan Masa Depan Web UX
• Apakah Semua Tren Layak? 5 Kesalahan UX Paling Umum yang Dilakukan Desainer Web