Dalam pembuatan website yang harus kamu lakukan sebagai developer website adalah membuat konten dan mendesain website yang unik serta menarik. Desain website yang menarik tentunya akan meningkatkan pengunjung website tersebut.
Namun, faktanya banyak developer yang mahir mendesain website, atau ahli pada UI/UX tetapi tidak bisa mengconvertnya pada website yang sebenarnya. Nah, kamu berada di artikel yang tepat, karena Jagoan Hosting akan mengulas mengenai cara mengconvert desain website ke real website dengan menggunakan Framer.
Langkah dalam Proses Desain Website
Sebelum membahas tentang cara mengconvert desain website ke real website, hal yang perlu kamu ketahui dulu adalah elemen dalam proses desain website. Berikut ulasan lengkap elemen dalam pembuatan desain website yang perlu kamu ketahui:
Slicing
Elemen dalam proses desain website yang pertama adalah slicing. Slicing adalah memecahkan dan memetakan gambar/design pada beberapa bagian, kemudian disatukan ke dalam HTML dan CSS. Dalam melakukan slicing, kamu bisa menggunakan dua cara yaitu, sebagai berikut:
- Menggunakan HTML, CSS, Javascript, ataupun menggunakan framework css yang sudah siap pakai.
- Melalui CMS yang biasanya cocok untuk digunakan mengolah konten dan didalam sebuah website, tanpa perlu memiliki skill khusus seperti coding atau programming secara dalam.
Handoff
Lebih lanjut, elemen dalam proses desain website adalah proses handoff. Lalu, apa itu handoff? Handoff adalah fase bagi developer atau pengembang website untuk mengimplementasikan desain yang sudah dibuat oleh product design atau developer ke dalam bahasa pemrograman
Spacing
Elemen terakhir dalam proses pembuatan desain website adalah spacing. Spacing adalah memperkirakan jarak dari masing-masing bagian konten, judul, description, button dan lain sebagainya. Spacing juga meliputi padding dan margin.
Baca juga: 13 Halaman Website yang Penting dan Wajib Ada di Situs Kamu
Cara Convert dari Figma ke Website (WordPress)
Ada cara yang lebih mudah dalam mengubah desain yang ada di Figma menjadi real website, yaitu dengan menyesuaikan tema yang mirip di WordPress. Berikut langkah-langkah convert dari Figma ke Website berbasis CMS WordPress:
Install WordPress
Sebelum melakukan proses menerapkan desain website, yang harus dilakukan yaitu memasang WordPress di website kamu. Berikut langkah menginstall WordPress melalui cPanel:
- Masuk ke cPanel hosting kamu
- Cari Softaculous di kolom pencarian
- Setelah masuk Softaculous, cari WordPress kemudian Install
Masuk ke Dashboard WordPress
Langkah yang pertama adalah login ke Word Press kamu dan buka dashboard WordPress
Pilih tema yang sesuai dengan desain di Figma
Kemudian pilih menu tampilan atau appearances di menu sebelah kiri dashboard WordPress kamu dan pilih tema -> tambah baru.
Banyak pilihan tema yang bisa kamu pilih, mulai dari Astra, Generate Press, Zakra dll.
Mulai pilih tema yang sesuai dengan desain di Figma yang telah kamu siapkan, kemudian pasang tema dan aktifkan yang sudah dipilih.
Kustomisasi Tema
Proses berikutnya kamu bisa mulai kustomisasi tema yang sudah dipilih, dengan pilih menu tampilan -> sesuaikan. Sesuaikan tema dengan desain yang telah kamu siapkan di Figma.
Di tahap ini kamu bisa menyesuaikan beberapa elemen seperti typography, layout dan warna.
Menggunakan Page Builder
Page builder bisa kamu jadikan pilihan untuk memudahkan proses dari desain di Figma ke website WordPress. Pilihan page builder seperti Elementor, Divi Builder, Beaver Builder yang bisa kamu pilih
Baca juga: 10 Contoh Desain Website Keren untuk Dijadikan Inspirasi
Cara Onlinekan dari Desain Website ke Hosting
Itulah cara mengconvert dari desain website ke real website. Nah, jika sudah selesai langkah berikut yang harus kamu lakukan adalah membuat website online ke hosting. Kamu bisa simak caranya disini.
Selain itu, lengkapi juga websitemu dengan produk Cloud Hosting dengan cPanel dari layanan Jagoan Hosting. Bahkan kamu bisa mendapatkan diskon hingga 81% jika menjadi pengguna baru layanan Jagoan Hosting satu ini.
Dengan menggunakan cloud hosting dengan cPanel kamu tidak perlu membutuhkan skill khusus seperti coding atau programming, cukup dengan drag and drop, kamu sudah bisa membuat website sendiri.
