Artikel wikiHow ini akan mengajarkan kepada Anda cara mendesain situs web yang tampak profesional dan berkinerja baik. Sementara sebagian besar desain situs web Anda pada akhirnya terserah Anda, ada beberapa hal penting yang harus dilakukan dan dihindari saat membuat situs web.
Langkah
Bagian 1 dari 2: Cara Mendesain Situs Web Anda
Langkah 1. Tentukan apakah Anda ingin menggunakan pembuat situs web
Situs web yang dibuat dari awal memerlukan pemahaman yang cukup rinci tentang pengkodean HTML, tetapi Anda dapat dengan mudah membuat situs web dengan menggunakan layanan hosting gratis seperti Weebly, Wix, WordPress, atau Google Sites. Pembuat situs web cenderung lebih mudah digunakan oleh desainer pemula daripada HTML.
- Jika Anda memutuskan untuk membuat kode situs web Anda sendiri, Anda harus mempelajari pengkodean HTML dan CSS.
- Jika menginvestasikan waktu dan energi untuk membuat situs web Anda tidak terdengar menarik, Anda juga dapat menyewa perancang situs web untuk membuat situs Anda untuk Anda. Desainer lepas dapat menghabiskan biaya antara $30 per jam dan lebih dari $100 per jam.
Langkah 2. Petakan situs Anda
Bahkan sebelum Anda membuka pembuat situs web, Anda harus mengetahui kira-kira berapa banyak halaman yang Anda inginkan untuk situs web Anda, konten apa yang seharusnya ada di setiap halaman tersebut, dan tata letak umum halaman penting seperti halaman beranda dan "Tentang" halaman.
Halaman situs web Anda mungkin lebih mudah untuk divisualisasikan jika Anda menggambar gambaran kasar dari masing-masing halaman daripada hanya menentukan konten apa yang akan muncul
Langkah 3. Gunakan desain intuitif
Meskipun ada sesuatu yang bisa dikatakan untuk ide-ide segar, desain dasar situs web Anda harus mengikuti pedoman yang telah ditetapkan seperti berikut:
- Opsi navigasi (mis., tab untuk halaman yang berbeda) harus berada di bagian atas halaman.
- Jika Anda menggunakan ikon menu (☰), ikon tersebut harus berada di pojok kiri atas halaman.
- Jika Anda menggunakan bilah pencarian, itu harus berada di dekat sisi kanan atas halaman.
- Tautan yang berguna (mis., tautan ke halaman "Tentang" atau halaman "Hubungi Kami") harus berada di bagian paling bawah setiap halaman.
Langkah 4. Konsisten
Apa pun font teks, palet warna, tema gambar, dan opsi desain yang Anda pilih, pastikan Anda menggunakan keputusan yang sama di seluruh situs web Anda. Ini bisa sangat menggelegar untuk melihat satu font atau skema warna yang digunakan untuk halaman "Tentang" ketika yang sama sekali berbeda digunakan untuk halaman rumah.
- Misalnya, jika Anda secara eksklusif menggunakan warna nada dingin untuk halaman beranda situs Anda, jangan terapkan warna cerah dan keras di halaman berikutnya.
- Perlu diingat bahwa menggunakan warna yang keras atau bentrok, terutama saat warna ditampilkan secara dinamis (misalnya, bergerak), dapat menimbulkan epilepsi pada sejumlah kecil pengguna web. Jika Anda memutuskan untuk menggunakan warna seperti itu di situs Anda, pastikan Anda menambahkan peringatan epilepsi sebelum halaman yang relevan.
Langkah 5. Tambahkan opsi navigasi
Menempatkan tautan langsung ke halaman penting di situs web Anda di bagian atas halaman beranda akan membantu mengarahkan pengunjung pertama kali ke konten yang penting. Sebagian besar pembuat situs menambahkan tautan ini secara default.
Penting untuk memastikan bahwa setiap halaman di situs web Anda dapat diakses dengan mengklik opsi di situs web Anda daripada hanya dapat diakses melalui alamat halaman
Langkah 6. Gunakan warna yang saling melengkapi
Seperti jenis desain lainnya, desain situs web bergantung pada kombinasi warna yang menyenangkan secara visual; karena itu, memilih warna tema yang cocok sangat penting.
Hitam, putih, dan abu-abu adalah kombinasi yang bagus jika Anda tidak tahu harus mulai dari mana
Langkah 7. Pertimbangkan untuk menggunakan desain minimalis
Minimalisme mendorong warna nada dingin, grafik sederhana, halaman teks hitam-putih, dan hiasan sesedikit mungkin. Karena minimalis membutuhkan sedikit elemen mewah, ini adalah cara mudah untuk membuat situs web Anda terlihat profesional dan menarik tanpa memerlukan banyak pekerjaan.
- Banyak pembuat situs web akan memiliki tema "minimalis" yang dapat Anda pilih saat menyiapkan situs web Anda.
- Alternatif untuk minimalis adalah "brutalisme", yang menggunakan garis yang lebih kasar, warna cerah, teks tebal, dan citra minimal. Brutalisme memiliki lebih sedikit pengikut daripada minimalis, tetapi tergantung pada konten situs web Anda, mungkin lebih sesuai dengan kebutuhan desain Anda.
Langkah 8. Buatlah pilihan yang unik
Garis lurus dan elemen web yang dikunci grid adalah taruhan yang aman, tetapi membuat beberapa keputusan gaya yang unik akan memberikan kepribadian ke situs Anda dan membantu situs Anda menonjol.
- Jangan takut untuk melawan tren dengan menempatkan elemen situs web secara asimetris atau menggunakan elemen yang tumpang tindih untuk membuat tampilan berlapis.
- Meskipun elegan, sudut tajam dan elemen persegi (juga dikenal sebagai presentasi "berbasis kartu") kurang disukai daripada elemen bulat dan lembut.
Bagian 2 dari 2: Cara Memaksimalkan Kinerja Situs Web
Langkah 1. Manfaatkan opsi pengoptimalan seluler
Peramban seluler menyumbang lebih banyak lalu lintas web daripada peramban desktop, artinya jumlah perhatian yang Anda berikan ke versi seluler situs web Anda setidaknya harus sama dengan pengembangan situs web desktop Anda. Sebagian besar layanan pembuat situs web secara otomatis membuat versi seluler situs Anda, tetapi Anda perlu mengingat informasi berikut untuk situs seluler Anda:
- Pastikan tombol (mis., tautan situs) berukuran besar dan mudah diketuk.
- Hindari penerapan fitur yang tidak dapat dilihat di seluler (mis., Flash, Java, dll.).
- Pertimbangkan untuk membuat aplikasi seluler untuk situs web Anda.
Langkah 2. Hindari menggunakan terlalu banyak foto per halaman
Peramban desktop dan seluler dapat kesulitan memuat halaman yang menampilkan banyak foto atau video. Meskipun gambar penting dalam desain web, menggunakan lebih dari beberapa per halaman dapat menyebabkan waktu pemuatan yang terlalu lama, yang akan mencegah orang mengunjungi halaman yang dimaksud.
Secara umum, Anda ingin halaman situs web Anda dimuat dalam waktu kurang dari empat detik
Langkah 3. Tambahkan halaman "Kontak"
Anda akan melihat bahwa hampir semua situs web mapan memiliki halaman "Hubungi Kami" yang memiliki informasi kontak (misalnya, nomor telepon dan alamat email); beberapa situs bahkan memiliki formulir pertanyaan bawaan di halaman ini. Menambahkan halaman "Kontak' akan memberi pemirsa situs web jalur komunikasi langsung kepada Anda, sehingga menambahkan solusi untuk kemungkinan frustrasi.
Langkah 4. Buat halaman 404 kustom
Ketika seseorang mengunjungi halaman tertentu di situs web Anda yang belum disiapkan atau tidak ada, halaman web "Kesalahan 404" akan ditampilkan. Sebagian besar browser memiliki halaman 404, tetapi Anda mungkin dapat menyesuaikan halaman Anda dari dalam pengaturan pembuat situs web Anda; jika demikian, pastikan Anda menyertakan detail berikut:
- Pesan kesalahan ringan (mis., "Selamat - Anda telah menemukan halaman kesalahan kami!")
- Tautan kembali ke halaman beranda situs
- Daftar tautan yang sering dilihat
- Gambar atau logo untuk situs web Anda
Langkah 5. Gunakan bilah pencarian jika memungkinkan
Jika metode pembuatan situs web Anda mendukung penambahan bilah pencarian ke situs web Anda, sangat disarankan agar Anda melakukannya. Ini akan memastikan bahwa pengguna dapat dengan cepat menavigasi ke halaman atau item tertentu tanpa harus mengklik opsi navigasi Anda.
Bilah pencarian juga berguna ketika audiens Anda ingin mencari istilah umum tanpa menggunakan coba-coba
Langkah 6. Investasikan waktu paling banyak di halaman beranda Anda
Ketika seseorang tiba di beranda situs web Anda, mereka harus segera mendapatkan inti dari tema situs web Anda; selain itu, semua elemen halaman beranda harus dimuat dengan cepat, termasuk opsi navigasi dan gambar apa pun. Halaman rumah Anda harus memiliki aspek-aspek berikut:
- Ajakan bertindak (misalnya, tombol untuk mengklik atau formulir untuk diisi)
- Bilah alat atau menu navigasi
- Grafik yang mengundang (mis., satu foto solid, video, atau sekelompok kecil foto dengan teks yang menyertainya)
- Kata kunci yang berkaitan dengan layanan, topik, atau fokus situs web Anda
Langkah 7. Uji situs web Anda di beberapa browser di berbagai platform
Ini sangat penting, karena browser yang berbeda dapat menangani aspek situs web Anda secara berbeda. Sebelum Anda mulai mempromosikan situs web Anda, coba kunjungi dan gunakan situs web Anda di browser berikut di platform Windows, Mac, iPhone, dan Android:
- Google Chrome
- Firefox
- Safari (khusus iPhone dan Mac)
- Microsoft Edge dan Internet Explorer (hanya Windows)
- Browser bawaan pada beberapa ponsel Android yang berbeda (mis., Samsung Galaxy, Google Nexus, dll.)
Langkah 8. Lanjutkan memperbarui situs web Anda seiring bertambahnya usia
Tren desain, tautan, foto, konsep, dan kata kunci semuanya berubah seiring berjalannya waktu, jadi Anda harus terus membuat perubahan pada situs web Anda agar tetap up to date. Ini akan mengharuskan Anda untuk memeriksa kinerja situs web Anda bersama situs web serupa lainnya setidaknya sekali setiap tiga bulan (sebaiknya lebih sering).
Bantuan HTML Dasar
Contoh Halaman Web dengan HTML
Dukung wikiHow dan buka kunci semua sampel.
Lembar Cheat HTML
Dukung wikiHow dan buka kunci semua sampel.
Contoh Halaman Web Sederhana
Dukung wikiHow dan buka kunci semua sampel.
Tips
- Aksesibilitas situs web adalah aspek penting lain dari pengembangan situs web. Ini mencakup hal-hal seperti teks untuk audiens dengan gangguan pendengaran, deskripsi audio untuk pengunjung tunanetra, dan peringatan fotosensitifitas jika situs web Anda menggunakan efek yang berpotensi memicu kejang.
- Sebagian besar pembuat situs web memiliki seperangkat templat yang dapat Anda gunakan untuk memperkuat tata letak dan desain situs Anda sebelum menambahkan elemen pilihan Anda.
Peringatan
- Sebagian besar pembuat situs gratis; namun, jika Anda ingin menggunakan domain Anda sendiri (mis., "www.namaanda.com" alih-alih "www.namaanda.wordpress.com"), Anda harus membayar biaya bulanan atau tahunan.
- Hindari plagiarisme dan patuhi semua undang-undang hak cipta: jangan menambahkan gambar acak dari web, atau bahkan elemen struktural, tanpa izin.
