8 Perintah Proses Desain Web (untuk Pemula & Tanpa Kode)
Diterbitkan: 2021-11-01
Cari tahu bagaimana Anda dapat membuat situs web yang sukses dengan mengikuti proses desain situs web terstruktur.
Hipotesis kami adalah Anda telah menemukan nama domain dan penyedia hosting.
Jika Anda belum memilih host Anda, kami sangat merekomendasikan mitra kami Cloudways .
Dalam contoh di bawah ini, langkah-langkah disajikan untuk kasus di mana Anda membuat situs web untuk diri sendiri. Jika situs web untuk klien, langkah-langkah baru mungkin terjadi dalam hal perencanaan proyek, pengaturan tenggat waktu, kontrak, dan banyak lagi. Tetapi pada intinya, Anda masih harus mengikuti langkah-langkah yang disajikan di bawah ini.
Sekarang, inilah langkah-langkahnya:
- Identifikasi ruang lingkup : kebutuhan apa yang harus dipenuhi oleh situs web? Dengan siapa situs web berbicara? Yang mana tujuan dan motivatornya? Bisnis mana yang memiliki cakupan dan target audiens yang sama dengan Anda?
- Mendefinisikan peta situs situs web : halaman web dan fitur apa yang membantu bisnis dan audiens dalam mencapai tujuan mereka?
- Pembuatan konten : menyiapkan salinan untuk halaman situs web;
- Membuat merek visual : mempersiapkan palet warna, font, dan grafik yang akan digunakan dalam desain situs web Anda, yang pada akhirnya akan membentuk identitas visual Anda;
- Wireframing: membuat sketsa tata letak halaman web Anda;
- Desain situs web : membuat situs web yang sebenarnya, perhatikan keterbatasan alat yang Anda gunakan;
- Pengujian : memastikan semuanya berfungsi, mulai dari tautan hingga formulir dan tombol. Uji situs web di berbagai browser dan perangkat untuk memastikannya berfungsi dengan baik;
- Peluncuran: buat kebisingan sebelum ditayangkan dengan strategi komunikasi yang direncanakan dengan cermat.
Mari kita ambil satu per satu.
Langkah-langkah proses desain situs web
1. Identifikasi ruang lingkup
Pada tahap ini Anda dan tim Anda perlu mencari tahu jawaban dari beberapa pertanyaan di bawah ini:
- Untuk siapa situs itu?
Situs web yang menarik mungkin memiliki kelebihannya sendiri, tetapi, jika Anda ingin pengunjung situs web Anda memberikan uang atau waktu mereka, itu berarti Anda perlu menggali lebih banyak, untuk meyakinkan mereka bahwa komitmen tersebut sangat berharga. Untuk meyakinkan, Anda perlu memahami audiens target Anda, memahami kebutuhannya, motivator internal dan eksternal.
Penggalian ini juga berarti Anda perlu menciptakan produk yang berguna dan menjawab kebutuhan seseorang.
Sebagai contoh, katakanlah saya memiliki hobi membuat rangkaian bunga kertas dan ingin mengembangkannya lebih jauh dan mengubahnya menjadi sebuah bisnis. Apakah ada yang membuat bunga kertas? Di mana saya dapat menemukan orang-orang ini?
Yah, saya mungkin berpikir bahwa perencana pernikahan dan calon pengantin mungkin menginginkan pilihan seperti itu.
Tapi aku harus melangkah lebih jauh. Apakah setiap pengantin menginginkan bunga kertas saya atau hanya jenis pengantin?
Ini berarti bahwa Anda harus melalui beberapa penelitian dan memeriksa pesaing Anda. Apakah ada pedagang bunga kertas lain? Anda juga bersaing dengan toko bunga tua yang bagus. Mana yang akan menjadi nilai tambah Anda, atau proposisi nilai unik Anda?
- Apa yang diharapkan pengunjung situs web Anda temukan di situs web Anda?
Kembali ke contoh kami, mungkin pengunjung Anda ingin melihat berbagai produk, warna, info pengiriman (mereka mungkin memerlukan perawatan ekstra karena bunga kertas rapuh), dll. Bagaimana dengan beberapa yang menyebutkan bahwa kertas didaur ulang ? Mungkin klien Anda sangat sadar akan dampaknya terhadap lingkungan, dan mereka peduli dengan detail seperti itu
Bisakah seseorang juga menyewa bunga?
Sekarang, bagaimana jika Anda menyertakan beberapa testimonial? Mungkin Anda merancang beberapa rangkaian bunga kertas untuk pernikahan teman Anda.
Lihat di mana saya mendapatkan? Anda perlu melakukan riset, sebelum terjun ke desain situs web.
- Bagaimana tampilan konversinya?
Apakah kita berbicara tentang pendaftaran kursus, pembelian produk, berlangganan buletin?
Dalam kasus hari Senin, Anda dapat dengan mudah mengetahui konversi mereka dari beranda. 
Konversi utama terlihat dari ajakan bertindak "Memulai", yang diposisikan tepat di paruh atas, di tengah.
Konversi mikro lainnya adalah pendaftaran konferensi, yang dapat Anda perhatikan dari pesan di sudut kiri atas.
Konversi mikro lainnya adalah "Kontak penjualan".
Bagaimana dengan website Anda, apakah ada konversi utama? Apakah ada yang sekunder?
- Bagaimana perjalanan pelanggan terlihat seperti?
Peta perjalanan pelanggan adalah representasi visual dari jalur yang diambil pengunjung melalui situs web Anda dari pintu masuk mereka, hingga mereka mencapai tujuan yang diinginkan dan pergi.
Peta perjalanan pelanggan harus mencakup info seperti halaman yang dikunjungi dan dalam urutan apa, langkah-langkah yang diperlukan agar pengunjung situs web mencapai tujuannya, titik interaksi antara perusahaan Anda dan pengunjung situs web (formulir, chatting, dll), titik gesekan potensial.
Perjalanan pelanggan tidak tetap. Anda mulai dengan asumsi kemudian menyesuaikan di sepanjang jalan. Anda dapat menggunakan alat seperti Google Analytics untuk menganalisis perilaku situs web dan melakukan pengoptimalan berdasarkan wawasan nyata.
2. Menentukan peta situs situs web 
Sumber
Setelah perjalanan pelanggan jelas, saatnya membuat peta situs. Peta situs situs web digunakan untuk membangun arsitektur informasi situs web dan menjelaskan hubungan antara berbagai halaman.
Anda dapat membuat peta situs dalam alat mulai dari Excel hingga Figma.
3. Pembuatan konten 
Sekarang setelah struktur situs web dibuat, saatnya membuat konten untuk halaman individual.
Berikut adalah beberapa praktik terbaik dalam hal copywriting:
- Gunakan kata-kata dan konsep yang akrab bagi pengguna ideal Anda;
- Jangan pergi dengan bulu dan jargon;
- Cobalah untuk berkomunikasi seperti yang akan Anda lakukan dalam pertemuan tatap muka yang normal. Dengan cara ini Anda akan menimbulkan perasaan akrab;
- Tulis dalam present tense, dan hindari kalimat pasif;
- Selalu periksa keterbacaan Anda. Untuk ini, Anda dapat menggunakan alat seperti Readable .
- Uji berita utama Anda dengan teman, orang asing, kolega. Seperti yang dikatakan David Ogilvy:
“Rata-rata, 5x lebih banyak orang membaca headline dibandingkan membaca body copy. Ketika Anda telah menulis judul Anda, Anda telah menghabiskan delapan puluh sen dari dolar Anda.”
Ini berarti bahwa berita utama sangat penting di situs web.
Cobalah untuk mengoptimalkan konten Anda di sekitar kata kunci relevan tertentu untuk audiens Anda (SEO). Anda dapat menggunakan alat seperti tren Google (gratis), Ubersuggest (gratis), atau Ahrefs (berbayar).
- Manfaatkan kerangka kerja copywriting AIDA.
A – Perhatian : buat konten yang menarik perhatian, yang membangkitkan rasa ingin tahu, dan yang meyakinkan audiens Anda bahwa mereka perlu mengetahui lebih banyak tentang merek Anda.
I – Interest : memberi pengunjung Anda alasan untuk tetap terlibat. Kuncinya di sini adalah untuk membuat masalah pribadi sehingga Anda hanya berbicara kepada calon pelanggan dan tidak ada orang lain.
D – Desire : di sinilah Anda menunjukkan kepada pengunjung beranda Anda bagaimana penawaran Anda memberikan solusi untuk masalah/kesakitan mereka. Di sini Anda dapat mulai menjelaskan fitur produk Anda, dengan fokus pada bagaimana fitur tersebut dapat meningkatkan kehidupan mereka.
A – Tindakan : sekarang saatnya membujuk prospek untuk bertindak: beli, berlangganan, unduh gratis, mulai uji coba, dll.
4. Menciptakan merek visual
Langkah ini tidak harus selalu menjadi langkah ke-4 Anda. Anda dapat memulai lebih awal dalam proses ini.
Identitas visual mengacu pada cara Anda membentuk persepsi seputar merek Anda.
Ini adalah keseluruhan proses dengan sendirinya.
Di sini Anda perlu:
- Tentukan bagaimana grafik Anda akan terlihat. Apakah Anda akan menggunakan bentuk, grafik 3D, ilustrasi?
Sumber
- Tentukan tipografi situs web Anda;
Sumber
- Pilih palet warna . Dari palet warna, Anda dapat berevolusi menjadi panduan gaya, di mana Anda dapat menetapkan warna tautan, tajuk utama, tombol, latar belakang, dll. untuk ini Anda dapat menggunakan alat seperti roda warna Adobe .
Sumber
- Kurasi gambar yang menceritakan kisah merek Anda;
Sumber: https://convertsquad.com/blog/
- Desain logo Anda
Sumber
- Menyiapkan aset fisik (kemasan produk, dll).
Sumber
Sebagian besar elemen di atas dapat digunakan untuk membuat papan suasana hati. Saat Anda mengumpulkan font, grafik, warna di papan suasana hati, Anda akan dapat lebih memahami visi suasana situs web secara keseluruhan. Bagaimana nada dan suara Anda secara keseluruhan: terang atau gelap? Formal atau main-main? 
Sumber
5. Wireframing 
Sumber
Wireframes adalah sketsa halaman web atau aplikasi. Anda dapat menggambarnya dengan tangan, membuatnya di Google Documents, Sketch, atau Figma , tergantung pada kerumitan situs web Anda. Sebuah wireframe digunakan untuk tata letak konten dan fungsionalitas pada halaman. Ini harus memberi tahu seorang desainer di mana dia harus menempatkan video, gambar, headline, blok konten, tombol, dll. Ada baiknya menggunakan wireframes sebelum terjun ke desain karena memungkinkan Anda untuk lebih fleksibel. Lebih mudah untuk mengubah struktur wireframe daripada salah satu situs web siap pakai.
6. Desain situs web 
Sumber
Sekarang kita berbicara bisnis!
Kami memiliki konten, gambar rangka, elemen visual, sekarang saatnya untuk mulai bekerja.
Seperti yang disebutkan dalam judul, Anda tidak perlu menjadi desainer web atau geek kode untuk membuat situs web. Ada banyak alat di luar sana untuk membantu Anda mendesain situs web tanpa kode. Mereka disebut Pembuat Halaman.
Sebagian besar dari mereka memungkinkan Anda untuk menyesuaikan setiap inci desain Anda, dan membuatnya responsif.
Di dalam WordPress, Anda dapat menggunakan pembuat Colibri kami sendiri, atau Elementor, misalnya. Di luar WordPress, Wix dan Squarespace sangat populer. Alat-alat ini dapat memberi Anda templat, yang dapat Anda perkaya dengan menambahkan bagian, visual, dan konten Anda sendiri.
Sekarang, jika desain Anda memerlukan animasi, efek tertentu, Anda mungkin perlu menambahkan beberapa kode.
7. Pengujian
Oke, katakanlah konten dan visual Anda sudah habis. Pekerjaanmu belum siap. Saatnya untuk memastikan bahwa semuanya berfungsi: Anda tidak memiliki tautan yang mengarah ke mana-mana (alias tautan rusak atau 404), bahwa semua tombol dan formulir Anda berfungsi, bahwa situs web terlihat baik di sebagian besar browser, dan perangkat.
Sekarang, sebelum peluncuran, Anda dapat menguji sedikit bagaimana situs web Anda dilihat oleh orang luar. Dengan cara ini Anda dapat menghindari terjebak dalam bias Anda sendiri. Untuk ini, Anda dapat melakukan riset pengguna sederhana: tes 5 detik . Ini adalah metode yang membantu Anda mengukur kesan pertama yang didapat pengguna dalam lima detik pertama setelah melihat beranda, misalnya
8. Luncurkan
Sekarang, ketika Anda meluncurkan, Anda tinggal menekan publish dan selesai. Tidak, Anda perlu membuat beberapa buzz, meluncurkan beberapa kampanye PR, melakukan teriakan media sosial untuk memberi tahu orang-orang bahwa Anda keluar!
Dan itu orang-orang bungkus. Sekarang Anda memiliki langkah-langkah yang tepat untuk proses desain web.
Selamat membangun situs web!
Jika Anda menyukai artikel ini, dan Anda ingin mempelajari lebih lanjut tentang cara mendesain situs web WordPress , pastikan untuk berlangganan saluran Youtube Colibri dan ikuti kami di Twitter dan Facebook!