Promo Cyber Week: Hingga 87 % OFF

02

:

21

:

08

:

40

Blog Zyro

Semua Topik
Blog eCommerce Desain Esensial Ide Usaha Inspirasi Pemasaran Tips Berbisnis

Cara Desain Website dengan Mudah untuk Pemula

Cara desain website

Katakan selamat tinggal pada mahalnya menyewa jasa web developer. Kini setiap orang bisa membuat website sendiri langsung dari rumah semenjak adanya website builder.

Namun, mengetahui cara membuat situs web hanyalah permulaan. Penting juga untuk memahami cara membuat yang cantik dan fungsional.

Faktanya, desain memainkan peran utama dalam keberhasilan sebuah situs web. Desain yang tidak menarik dapat membuat hampir separuh pengunjung situs web Anda pergi.

Bagi non-desainer, membuat situs web yang bagus mungkin terdengar sulit. Jika Anda memerlukan bantuan, baca artikel ini untuk mengetahui cara desain website sendiri, dan mengapa desain web penting.

Langkah 1: Tentukan platform

Memilih platform yang tepat sangat penting ketika mempelajari cara desain website. Pilihan ini akan menentukan batas hasil akhir Anda.

Zyro adalah platform pembuatan situs web yang mencakup segalanya. Ini sangat intuitif dan Anda tidak memerlukan pengetahuan pengkodean apa pun untuk memulai.

Zyro memiliki pilihan template cantik yang dapat Anda sesuaikan dengan editor drag-and-drop-nya. Itu juga dilengkapi dengan sistem grid, yang memastikan semua elemen halaman selaras dengan sempurna.

Ini juga dilengkapi alat berbasis AI seperti AI Writer dan AI Heatmap. Ini membantu membangun branding online Anda, dan meningkatkan pemasaran Anda. Kami akan berbicara lebih banyak tentang ini nanti.

Langkah 2: Pilih template

Menggunakan template situs web membuat tugas Anda lebih mudah, karena Anda tidak harus memulai dari awal.

Zyro memiliki pilihan template yang cocok untuk berbagai tujuan — mulai dari portofolio dan resume hingga situs bisnis.

Saat memilih template Anda, pastikan desainnya sesuai dengan tujuan situs web Anda.

Menggunakan desain yang tepat sangat penting untuk memastikan situs web Anda terlihat bagus, dan memiliki fitur yang tepat untuk jenis situs web yang Anda buat.

Misalnya, jika Anda ingin memperkenalkan produk baru, coba Halaman Produk. Ini fitur blok foto besar, membiarkan Anda memamerkan barang dagangan Anda dengan bangga.

Memilih template website

Template menakjubkan lainnya disebut Bakery. Yang ini sangat cocok untuk bisnis apa pun yang ingin terlihat sedikit menyenangkan.

Cara desain website bakery

Pratinjau setiap template untuk memberi Anda ide tentang bagaimana mereka sesuai dengan konten Anda sendiri.

Ketika Anda telah memilih template, Anda akan diarahkan ke Zyro Editor. Lanjutkan ke bagian berikutnya untuk mulai mendesain.

Langkah 3: Kustomisasikan template

Saatnya untuk berkreasi. Editor Zyro memungkinkan setiap bagian dari template Anda untuk disesuaikan, jadi luangkan waktu untuk menjelajahi apa yang dapat Anda lakukan dengan alat ini.

Jika Anda tidak tahu harus mulai dari mana, cobalah membiasakan diri dengan cara kerja pembuat seret dan lepas terlebih dahulu.

Pilih elemen dan pindahkan ke mana pun Anda inginkan, atau ubah ukurannya. Sistem grid akan memastikannya tetap proporsional.

Grid editor Zyro

Jika Anda membutuhkan lebih banyak konten, klik Tambahkan Elemen di tab menu kiri atas. Kemudian seret salah satu elemen ke template Anda.

Editor peta

Setelah Anda siap untuk mulai mengutak-atik template lagi, berikut adalah beberapa hal yang dapat Anda coba:

Langkah 4: Edit dan atur teks

Mari kita mulai dengan elemen teks. Untuk menyesuaikannya, pilih kotak teks dan klik Edit Teks.

Anda akan dapat menyesuaikan penekanan teks, warna, perataan, huruf besar, dan sebagainya.

Selain itu, Anda dapat memilih gaya Heading atau Paragraph untuk teks Anda. Setiap gaya memiliki berbagai ukuran untuk dipilih.

Heading website

Saat mengedit teks, gunakan ‘hierarki tipografi‘. Ini berarti mengatur dan menata teks pada halaman web berdasarkan kepentingannya.

Hirarki memberi Anda kendali atas apa yang pertama kali diperhatikan pengunjung, dan membuat konten Anda tetap dapat dibaca.

Secara umum, konten teks situs web dibagi menjadi:

  • Judul utama — bagian terpenting, yang akan langsung menarik perhatian pengguna. Sebagai aturan, itu harus besar dan diposisikan di atas.
  • Subheading — poin penting yang memperluas judul utama. Mereka harus cukup berbeda dan membuat pengunjung tetap terlibat untuk menjelajahi situs web Anda.
  • Paragraf — rincian pendukung yang menguraikan setiap subpos. Teks harus singkat, karena kebanyakan orang akan membaca sekilas tentang halaman.
    Untuk mengilustrasikan cara kerja hierarki tipografi, mari kita lihat template Perawatan Hewan Peliharaan di bawah ini.

Contoh template portman

Di sini, tagline bisnis menggunakan gaya XXL Heading untuk heading utama. Pembaca dapat dengan cepat memahami tentang bisnis tersebut.

Subjudul dalam template menggunakan gaya XL Heading. Mereka digunakan untuk membagi halaman menjadi beberapa bagian dan menjelaskan lebih banyak tentang bisnis.

Sementara itu, sebagian besar paragraf menggunakan gaya \M Paragraph. Untuk memastikannya dapat dibaca di perangkat yang lebih kecil, setiap paragraf hanya memiliki tiga hingga empat baris.

Halaman layanan kami

Jangan ragu untuk bereksperimen dengan hierarki tipografi situs web Anda.

Kuncinya di sini adalah menggunakan gaya yang berbeda untuk setiap jenis konten. Dengan cara ini, pengguna memiliki pengalaman membaca yang nyaman dan dapat mencari informasi yang tepat dengan mudah.

Langkah 5: Tambahkan gambar

Gambar mana yang Anda gunakan dan di mana Anda menempatkannya dapat membuat perbedaan apakah situs web Anda terlihat bagus. Ini akan memutuskan apakah itu berhasil menarik penonton.

Salah satu cara termudah untuk mengesankan pengunjung adalah dengan menggunakan gambar pahlawan. Ini adalah gambar lebar penuh yang ditempatkan di atas situs web Anda.

Ini dapat menciptakan pengalaman pengguna yang imersif, mengatur suasana yang tepat untuk halaman, dan mengundang orang untuk memeriksa situs web Anda lebih lanjut. Template Modern Art menggambarkan yang terbaik ini:

Desain website Modern Art

Tembakan pahlawan juga dapat menunjukkan bagaimana suatu produk atau layanan dapat menguntungkan pelanggan.

Lihatlah contoh berikut oleh Luxy Hair. Di sini, bidikan pahlawan menunjukkan bagaimana pengunjung dapat menggunakan ekstensi mereka untuk mendapatkan rambut yang lebih tebal.

Website Luxy Hair

Di Zyro Editor, ada dua cara untuk menampilkan gambar: melalui elemen gambar atau latar belakang bagian:

  • Untuk mengubah elemen gambar pada template Anda. Pilih gambar dan klik Edit Gambar -> Ganti Gambar.
  • Anda dapat memutuskan apakah akan menggunakan gambar Anda sendiri atau memilih salah satu dari perpustakaan foto gratis Zyro.
  • Untuk mengunggah file Anda sendiri, buka tab Foto Situs dan seret file JPG, PNG, atau SVG ke Editor.

Editor Pilih Gambar

Pastikan untuk menggunakan gambar yang berkualitas tinggi namun dengan ukuran file yang kecil File gambar yang besar dapat menurunkan kinerja situs Anda. Gunakan alat kompresi gambar seperti Compressor.io untuk membantu Anda.

Setelah gambar diunggah, itu harus segera muncul di template.

Jika Anda ingin menggunakan foto dari Zyro:

  • Buka tab Foto Gratis.
  • Masukkan beberapa kata kunci ke dalam bilah pencarian. Ini akan memberikan hasil yang paling relevan untuk Anda.
  • Setelah Anda menemukan gambar yang tepat, tekan Select.

Editor Images

Saat menggunakan elemen gambar, jangan lupa untuk mengedit teks alt pada tab SEO pengaturan Gambar.

Alt-teks membantu mesin pencari mengenali gambar Anda, dan memberi tahu orang-orang tunanetra apa isinya.

Pengaturan gambar

Jika Anda ingin menambahkan gambar sebagai latar belakang untuk bagian:

  • Klik Edit Bagian di sudut kanan atas bagian.
  • Buka tab Gambar -> Tambahkan Gambar.
  • Anda dapat menggunakan gambar Anda sendiri atau dari Zyro.

Langkah 6: Tentukan warna

Warna adalah kunci untuk desain apa pun. Mereka mengomunikasikan identitas visual Anda, dan memengaruhi perasaan pengunjung saat membuka situs web Anda.

Umumnya, yang terbaik adalah memilih satu warna dominan dan beberapa warna sekunder untuk skema warna situs web Anda.

Warna dominan harus menjadi warna yang terutama dikaitkan dengan merek Anda. Warna sekunder harus meningkatkan atau melengkapi warna dominan.

Tidak ada aturan pasti berapa banyak warna sekunder yang harus dipilih, tetapi lebih baik menggunakan dua saja. Menggunakan terlalu banyak warna dapat membuat situs web Anda terlihat kekanak-kanakan, dan dapat mengalihkan perhatian pengguna.

Karena setiap warna memiliki arti yang berbeda, Anda perlu mengetahui warna mana yang paling mewakili Anda.

Pertimbangkan jenis situs web apa yang Anda buat dan kesan seperti apa yang ingin Anda tinggalkan. Manfaatkan psikologi warna untuk membantu Anda.

Misalnya, banyak merek teknologi seperti Intel dan Facebook menggunakan warna biru sebagai warna dominan mereka. Alasan mereka mungkin berbeda, tetapi umumnya, biru mewakili keandalan dan kredibilitas.

Website Intel

Butuh bantuan untuk menemukan skema warna yang tepat? Gunakan generator warna. Alat seperti Coolors memberikan ide tentang warna apa yang terlihat bagus jika dipadukan.

Setelah menemukan warna yang tepat, petakan di mana harus menggunakannya. Di Zyro, Anda dapat menyesuaikan warna font dan latar belakang setiap bagian.

Untuk mengubah warna font, pilih elemen teks dan klik ikon warna. Sesuaikan pengaturan sampai Anda menemukan warna yang tepat.

Jika Anda menggunakan Coolors, Anda dapat menyalin dan menempelkan kode warna ke alat penyesuaian warna.

Warna font

Untuk latar belakang, klik Edit Bagian di sudut kanan atas bagian dan ubah pengaturan pada tab Warna.

Warna latar

Warna dominan harus digunakan di seluruh situs web Anda, tempat-tempat yang mengarahkan banyak perhatian, seperti bagian paruh atas.

Karena pengunjung menghabiskan sebagian besar waktunya pada konten paruh atas, memiliki warna dominan di sini akan membantu mereka mengaitkan warna dengan merek Anda.

Misalnya, template Wellness ini menyambut pengunjung dengan latar belakang krem. Warna ini juga digunakan di beberapa tipografi dan elemen visual untuk menjaga konsistensi visual.

Website terapis

Hasilnya, pengunjung tahu bahwa krem adalah warna khas situs tersebut. Sisa halaman menggunakan putih dan hitam sebagai warna sekunder, yang membantu warna dominan lebih menonjol.

Langkah 7: Atur layout template

Saat Anda mengerjakan template dan konten Anda, ingatlah untuk menjaga tata letak tetap sederhana dan bersih. Membuat situs web Anda bebas dari kekacauan penting untuk membantu keterbacaan dan navigasi.

Hanya fitur elemen yang menonjolkan fokus situs web Anda. Ciptakan ruang untuk beberapa ruang putih, sehingga elemen tidak duduk terlalu berdekatan.

Jika Anda merasa template kehabisan ruang, klik Tambahkan Bagian di bagian bawah bagian.

Anda dapat memilih salah satu blok premade atau blok kosong untuk mengisinya dengan konten Anda sendiri.

Tambahkan bagian baru

Langkah 8: Lakukan optimasi desain

Menerbitkan situs web sebelum dioptimalkan dapat merusak peluang keberhasilan Anda.

Anda memerlukan alat untuk melihat apakah desain berfungsi sebagaimana dimaksud.

Salah satu fitur Zyro yang dapat Anda gunakan untuk ini adalah AI Heatmap, yang memprediksi perilaku pengunjung di situs web Anda.

Untuk menggunakan Heatmap, unggah tangkapan layar situs web Anda ke alat tersebut. Ini akan menampilkan area halaman Anda yang paling menonjol bagi pengunjung.

Fitur warna elemen yang mendapatkan sebagian besar perhatian dalam warna merah dan yang paling sedikit dalam warna biru. Semakin dekat warnanya dengan merah, semakin terlihat oleh pemirsa.

Heatmap

Gunakan informasi yang disediakan oleh Peta Panas untuk meningkatkan situs web Anda. Bereksperimenlah pada tata letak dan penempatan yang berbeda sehingga desain situs web Anda mengubah pengunjung menjadi pelanggan.

Untuk mengoptimalkan website bagi pengguna seluler, Zyro telah membantu Anda. Semua template kami responsif, jadi Anda tidak perlu khawatir untuk menyesuaikan desain.

Terlebih lagi, dengan alat SEO bawaan kami, situs web Anda dijamin berperingkat tinggi di penelusuran seluler.

Jika Anda ingin melihat pratinjau tampilan situs web Anda di perangkat seluler, cukup klik ikon Smartphone di pojok kanan atas.

Tampilan mobile

Seperti yang Anda lihat, mendesain situs web dengan Zyro adalah proses yang mudah. Platform kami menangani masalah teknis, sehingga Anda dapat fokus untuk membuat situs Anda terlihat cantik.

Langkah 9: Personalisasikan website

Saat membuat situs web, menggunakan elemen merek pribadi atau bisnis Anda harus menjadi prioritas.

Anda dapat membedakan diri Anda dari pesaing Anda, dan menunjukkan kredibilitas dan keahlian Anda. Hal ini pada gilirannya dapat meningkatkan reputasi Anda dan membawa Anda lebih banyak pelanggan.

Elemen branding seperti logo, slogan, dan konten tidak boleh dianggap remeh.

Jika Anda memulai bisnis baru, menemukan identitas merek yang solid sendiri mungkin merupakan tantangan. Untungnya, Zyro memiliki fitur untuk membantu Anda.

Anda dapat menggunakan pembuat slogan AI gratis kami untuk membuat tagline yang menarik. Masukkan beberapa kata kunci yang menggambarkan bisnis Anda dan alat ini memberikan ide untuk dipilih.

Setelah Anda menemukan slogan yang bagus, modifikasilah hingga terdengar sempurna di telinga Anda.

Pertimbangkan juga untuk memanfaatkan pembuat logo kami. Anda dapat membuat logo dengan mengedit salah satu gambar yang disediakan.

Cukup tambahkan nama bisnis Anda dan slogan yang Anda buat sebelumnya. Anda dapat melihat pratinjau bagaimana logo akan terlihat dalam empat opsi tata letak yang berbeda.

Tool buat logo Zyro

Setelah slogan dan logo Anda siap, jangan lupa untuk menempatkannya di situs web Anda.

Slogan dapat digunakan sebagai heading utama, sedangkan logo dapat digunakan pada header dan footer.

Alat lain yang dapat Anda gunakan adalah AI Writer, yang dapat Anda temukan di Zyro Editor. Untuk mengaksesnya, klik ikon kuning di bawah tombol Publikasikan website.

Fitur ini membantu Anda menghasilkan konten yang unik dan ramah SEO. Yang perlu Anda lakukan adalah memilih topik teks, kategori, dan jenis konten yang sesuai.

Ini menghasilkan beberapa contoh yang dapat Anda gunakan. Setelah Anda menemukan konten yang Anda suka, salin dan tempel ke elemen teks dan sesuaikan konten dengan kebutuhan Anda.

Langkah 10: Onlinekan website

Sebelum memublikasikan situs web Anda, klik Pratinjau di sudut kiri atas untuk melihat tampilannya terlebih dahulu.

Pastikan semua elemen terlihat bagus, tautan dan media berfungsi dengan baik, dan konten terpenting telah disertakan.

Website Don Donno

Setelah siap, klik Publikasikan website. Anda akan diminta untuk membuat nama domain gratis atau menghubungkan domain Anda sendiri.

Pilih nama domain

Perhatikan bahwa Anda hanya dapat menggunakan domain khusus yang terdapat di daftar domain gratis jika Anda telah meningkatkan ke paket Basic atau Unleashed.

Belum punya nama domain? Gunakan generator nama domain untuk membantu Anda. Tekan Lanjutkan setelah Anda selesai menyiapkan domain.

Setelah situs web Anda diterbitkan, klik Lihat Website Saya untuk melihatnya beraksi.

Setelah menerbitkan, ingatlah untuk melacak kinerja situs web Anda. Jika Anda pengguna paket premium, gunakan integrasi Google Analytics untuk melakukannya.

Alat ini menganalisis lalu lintas Anda, kecepatan situs web, tingkat konversi, dan banyak lagi.

Dengan Analytics, Anda dapat mengidentifikasi dan memperbaiki masalah apa pun di situs web Anda.

Ini mungkin termasuk menggunakan gambar secara tidak benar atau menempatkan tombol di tempat yang salah.

Dengan Zyro, Anda dapat mengedit situs web Anda meskipun sudah publik. Cukup masuk ke akun Anda dan pilih Lihat Website Saya di bawah avatar Anda.

Tema website

Klik Edit Website di situs web yang perlu Anda sesuaikan. Setelah Anda membuat beberapa perubahan, pantau situs web Anda untuk melihat apakah perubahan tersebut meningkatkan kinerja Anda.

Mengapa desain website begitu penting?

Situs web adalah kunci untuk branding hari ini. Perusahaan berusaha keras untuk membuat situs mereka terlihat profesional dan meninggalkan kesan positif.

Kebanyakan orang tahu apa yang mereka cari ketika mereka mengunjungi situs web. Dengan desain yang tepat, pengguna dapat menavigasi halaman Anda dan mencari informasi yang tepat dengan mudah.

Sebaliknya, desain yang buruk bisa membuat pengunjung pergi dengan perasaan tidak puas.

Untuk menunjukkan pentingnya desain situs web, lihat Slack.

Website Slack

Di sini, visual website bisnis terlihat bagus dan bersih. Font dapat dibaca, tombol menonjol, dan menu navigasi jelas.

Hasilnya, orang dapat menjelajahi situs web dengan mudah dan mengenal produk lebih baik. Selain itu, skema warna dan jenis hurufnya modern dan bergaya.

Contoh bagus lainnya adalah Yelp. Situs web ini memiliki bilah pencarian di beranda sehingga orang dapat mencari layanan yang diperlukan.

Itu juga mempertahankan beberapa ruang kosong di antara komponen konten sehingga halaman tidak terasa berantakan.

Website Yelp

Tips menarik lainnya

Menciptakan desain yang sempurna adalah perjalanan yang tidak pernah berakhir. Berikut adalah beberapa tips untuk membantu Anda mempelajari cara desain website.

Tips 1. Ikuti tren desain web terbaru

Umumnya, tren desain web menunjukkan apa yang disukai pengguna saat ini. Jika situs web Anda memenuhi selera orang, Anda dapat membawa pelanggan ke merek Anda dengan lebih mudah.

Butuh ide tentang tren apa yang harus diikuti? Coba tampilkan ilustrasi khusus.

Orang-orang menggunakan ilustrasi untuk materi branding mereka untuk menunjukkan estetika yang unik. Simak contoh berikut oleh restoran Spicy NoSpicy.

Desain web Kyiv

Sebagai alternatif, pertimbangkan untuk menggunakan desain situs web minimal, seperti yang ditunjukkan dalam portofolio karya Andy Donohoe ini.

Website Andy Donohoe

Tidak hanya trendi, tetapi juga membantu mengoptimalkan kinerja situs karena ada lebih sedikit elemen untuk dimuat.

Tips 2. Pilih desain one-page

Karena pengguna seluler sekarang menghasilkan lebih dari setengah lalu lintas internet, banyak situs web saat ini hanya menggunakan satu halaman yang dioptimalkan untuk pengguliran panjang.

Desain ini sangat bagus untuk situs web yang tidak memiliki konten dalam jumlah besar — seperti resume, situs acara, atau halaman arahan.

Ketika dibuat dengan benar, situs satu halaman sangat kuat. Pengguna fokus untuk berpindah ke bawah melalui bagian untuk menjelajahi konten Anda alih-alih menavigasi ke halaman lain.

Tips 💁 – Jika Anda ingin menggunakan desain satu halaman, pastikan untuk membuat strategi yang mendorong pengunjung untuk terus menggulir.

Anda juga harus mengatur konten Anda secara logis sehingga pengalaman menggulir terasa mulus.

Contoh yang bagus dari ini adalah resume online Brittany Chiang. Dalam satu halaman, situs web menyediakan semua yang perlu diketahui pemberi kerja tentang insinyur perangkat lunak.

Tips cara desain website

Dengan mengatur situs webnya menjadi beberapa bagian, pengunjung dapat menggulir dan membaca resumenya dengan mudah.

Tips 3. Tambahkan human elements

Jika memungkinkan, pertimbangkan untuk menggunakan gambar orang di situs Anda.

Penelitian telah menunjukkan bahwa gambar orang sungguhan membangun kepercayaan dengan pengunjung, dan meningkatkan tingkat konversi jika dilakukan dengan benar.

Anda dapat mencoba apa yang dilakukan Bench dengan situs webnya.

Beranda menampilkan gambar karyawan dan klien. Ini menciptakan perasaan bahwa layanan mereka dapat diandalkan dengan bukti sosial.

Website Bench

Kesimpulan

Tidak cukup hanya mengetahui cara membangun situs web — Anda harus mempelajari tip dan trik untuk mendesainnya juga.

Desain situs web yang efektif meninggalkan kesan yang lebih positif pada pengunjung Anda, memastikan mereka terus datang kembali.

Selain itu, situs yang dirancang dengan baik dapat memudahkan pengguna dalam menavigasi konten Anda dan menemukan informasi yang tepat.

Saat mendesain situs web, Anda harus:

  • Pilih platform yang tepat — pembuat situs web seperti Zyro adalah tempat yang tepat untuk membuat situs web yang indah dengan cepat dan mudah.
  • Pilih template — pilih template yang sesuai dengan tujuan Anda dan terlihat sesuai untuk situs web Anda.
  • Sesuaikan — bermain-main dengan Zyro Editor untuk membiasakan diri dengan platform. Cobalah untuk mengatur teks, menampilkan beberapa gambar, memodifikasi warna, menjaga template tetap bersih, dan mengoptimalkan desain.
  • Personalisasi website — gunakan alat AI dan pembuat logo Zyro untuk upaya branding Anda.
  • Publikasikan — pratinjau situs web Anda sebelum dipublikasikan. Setelah dirilis, lacak kinerja situs web Anda dan edit lagi jika perlu.

Kami harap artikel ini memberi Anda pengetahuan tentang cara desain website.

Ditulis oleh

Avatar penulis

Astrid

Astrid adalah pengagum bahasa dan sastra yang kini berprofesi sebagai penerjemah. Ia ingin berbagi pengetahuan seputar teknologi, bisnis online, dan digital marketing melalui tulisannya yang dimuat di blog Zyro.

Tinggalkan komentar

Alamat email Anda tidak akan ditampilkan. Semua kolom wajib diisi.

Siap buat website?