Cara Merangka Laman Web (dengan Gambar)

Isi kandungan:

Cara Merangka Laman Web (dengan Gambar)
Cara Merangka Laman Web (dengan Gambar)

Video: Cara Merangka Laman Web (dengan Gambar)

Video: Cara Merangka Laman Web (dengan Gambar)
Video: PS4 7.55 Game Dumper Guide | Copy PS4 Games To Hard Drive 2024, Mungkin
Anonim

WikiHow ini mengajar anda bagaimana merancang laman web yang kelihatan profesional dan berprestasi baik. Walaupun sebahagian besar reka bentuk laman web anda akhirnya bergantung kepada anda, terdapat beberapa perkara penting yang harus dilakukan-dan dielakkan-ketika membuat laman web.

Langkah-langkah

Bahagian 1 dari 2: Cara Merangka Laman Web Anda

Merangka Laman Web Langkah 1
Merangka Laman Web Langkah 1

Langkah 1. Tentukan sama ada anda mahu menggunakan pencipta laman web

Laman web yang dibuat dari awal memerlukan pemahaman pengkodan HTML yang cukup terperinci, tetapi anda boleh membuat laman web dengan mudah dengan menggunakan perkhidmatan hosting percuma seperti Weebly, Wix, WordPress, atau Google Sites. Pembuat laman web cenderung lebih mudah digunakan oleh pereka pertama daripada HTML.

  • Sekiranya anda memutuskan untuk membuat kod laman web anda sendiri, anda perlu mempelajari pengekodan HTML dan CSS.
  • Sekiranya melaburkan masa dan tenaga untuk membuat laman web anda tidak begitu menarik, anda juga boleh menyewa pereka laman web untuk membuat laman web anda untuk anda. Perancang bebas boleh berharga antara $ 30 sejam dan lebih dari $ 100 sejam.
Merancang Laman Web Langkah 2
Merancang Laman Web Langkah 2

Langkah 2. Memetakan laman web anda

Sebelum anda membuka pencipta laman web, anda harus mengetahui kira-kira berapa banyak halaman yang anda mahukan untuk dimiliki oleh laman web anda, apa isi kandungan pada setiap halaman tersebut, dan susun atur umum halaman penting seperti halaman utama dan "Tentang" halaman.

Halaman laman web anda mungkin lebih mudah untuk dilihat jika anda melukis gambar kasar dari masing-masing daripada hanya menentukan kandungan apa yang harus muncul

Reka Laman Web Langkah 3
Reka Laman Web Langkah 3

Langkah 3. Gunakan reka bentuk intuitif

Walaupun ada yang boleh dikatakan untuk idea baru, reka bentuk asas laman web anda harus mengikuti garis panduan yang ditetapkan seperti berikut:

  • Pilihan navigasi (mis. Tab untuk halaman yang berlainan) harus berada di bahagian atas halaman.
  • Sekiranya anda menggunakan ikon menu (☰), ikon tersebut harus berada di sudut kiri atas halaman.
  • Sekiranya anda menggunakan bar carian, ia mesti berada di sebelah kanan atas halaman.
  • Pautan yang berguna (mis. Pautan ke halaman "Tentang" atau halaman "Hubungi Kami") harus berada di bahagian paling bawah setiap halaman.
Reka Laman Web Langkah 4
Reka Laman Web Langkah 4

Langkah 4. Bersikap konsisten

Apa pun fon teks, palet warna, tema gambar, dan pilihan reka bentuk yang anda pilih, pastikan bahawa anda menggunakan keputusan yang sama di seluruh laman web anda. Ini sangat menyusahkan untuk melihat satu fon atau skema warna yang digunakan untuk halaman "About" ketika yang sama sekali berbeza digunakan untuk halaman utama.

  • Sebagai contoh, jika anda secara eksklusif menggunakan warna nada sejuk untuk laman utama laman web anda, jangan gunakan warna terang dan keras di halaman seterusnya.
  • Perlu diingat bahawa menggunakan warna yang keras atau berbenturan, terutama ketika warna yang dipaparkan secara dinamis (misalnya, bergerak), dapat menimbulkan epilepsi dalam sebilangan kecil pengguna web. Sekiranya anda memutuskan untuk menggunakan warna seperti itu di laman web anda, pastikan anda menambahkan amaran epilepsi sebelum halaman yang berkaitan.
Merangka Laman Web Langkah 5
Merangka Laman Web Langkah 5

Langkah 5. Tambahkan pilihan navigasi

Menempatkan pautan terus ke halaman penting di laman web anda di bahagian atas halaman utama akan membantu mengarahkan pengunjung pertama kali ke kandungan yang penting. Sebilangan besar pencipta laman web menambahkan pautan ini secara lalai.

Penting untuk memastikan bahawa setiap halaman di laman web anda dapat diakses dengan mengklik pilihan di laman web anda dan bukan hanya dapat diakses melalui alamat halaman

Reka Laman Web Langkah 6
Reka Laman Web Langkah 6

Langkah 6. Gunakan warna yang saling melengkapi

Seperti jenis reka bentuk lain, reka bentuk laman web bergantung pada kombinasi warna yang menyenangkan secara visual; kerana ini, memilih warna tema yang bersatu sangat penting.

Hitam, putih, dan kelabu adalah kombinasi yang baik jika anda tidak tahu harus bermula dari mana

Merancang Laman Web Langkah 7
Merancang Laman Web Langkah 7

Langkah 7. Pertimbangkan untuk menggunakan reka bentuk minimalis

Minimalisme mendorong warna nada sejuk, grafik sederhana, halaman teks hitam putih, dan hiasan sekecil mungkin. Kerana minimalisme tidak memerlukan unsur-unsur mewah, ini adalah cara mudah untuk menjadikan laman web anda kelihatan profesional dan menarik tanpa memerlukan banyak kerja.

  • Banyak pencipta laman web akan mempunyai tema "minimalis" yang boleh anda pilih semasa menyiapkan laman web anda.
  • Alternatif untuk minimalisme adalah "brutalism", yang menggunakan garis yang lebih keras, warna terang, teks tebal, dan gambaran minimum. Brutalisme mempunyai lebih sedikit pengikut daripada minimalisme, tetapi bergantung pada kandungan laman web anda, ini mungkin lebih sesuai dengan keperluan reka bentuk anda.
Merancang Laman Web Langkah 8
Merancang Laman Web Langkah 8

Langkah 8. Buat pilihan yang unik

Garis lurus dan elemen web terkunci grid adalah pertaruhan selamat, tetapi membuat beberapa keputusan gaya yang unik akan memberikan keperibadian ke laman web anda dan membantu laman web anda menonjol.

  • Jangan takut untuk menolak trend dengan meletakkan elemen laman web secara tidak simetri atau menggunakan elemen bertindih untuk membuat penampilan berlapis.
  • Walaupun elegan, sudut tajam dan elemen kuadrat (juga dikenali sebagai persembahan "berdasarkan kad") kurang digemari daripada elemen lembut, bulat.

Bahagian 2 dari 2: Cara Memaksimumkan Prestasi Laman Web

Merancang Laman Web Langkah 9
Merancang Laman Web Langkah 9

Langkah 1. Manfaatkan pilihan pengoptimuman mudah alih

Penyemak imbas mudah alih menyumbang lebih banyak lalu lintas web daripada penyemak imbas desktop, yang bermaksud bahawa jumlah perhatian yang anda berikan kepada versi mudah alih laman web anda sekurang-kurangnya setara dengan pengembangan laman web desktop anda. Sebilangan besar perkhidmatan pencipta laman web membuat versi mudah alih laman web anda secara automatik, tetapi anda ingin mengingat maklumat berikut untuk laman web mudah alih anda:

  • Pastikan butang (mis. Pautan laman web) besar dan senang diketuk.
  • Elakkan menerapkan ciri yang tidak dapat dilihat di telefon bimbit (mis., Flash, Java, dll.).
  • Pertimbangkan untuk membuat aplikasi mudah alih yang dibuat untuk laman web anda.
Reka Laman Web Langkah 10
Reka Laman Web Langkah 10

Langkah 2. Elakkan menggunakan terlalu banyak gambar setiap halaman

Kedua-dua penyemak imbas desktop dan mudah alih sukar untuk memuat halaman yang memaparkan sejumlah besar foto atau video. Walaupun gambar penting dalam reka bentuk web, penggunaan lebih dari beberapa halaman dapat menyebabkan waktu pemuatan yang tidak perlu, yang akan menghalang orang untuk mengunjungi halaman yang dimaksud.

Secara amnya, anda mahu halaman laman web anda dimuat dalam masa kurang dari empat saat

Merancang Laman Web Langkah 11
Merancang Laman Web Langkah 11

Langkah 3. Tambah halaman "Hubungi"

Anda akan melihat bahawa hampir semua laman web yang mapan mempunyai halaman "Hubungi Kami" yang mempunyai maklumat hubungan (mis., Nombor telefon dan alamat e-mel); malah beberapa laman web mempunyai borang soalan terbina dalam halaman ini. Menambah halaman "Kontak" akan memberikan komunikasi langsung kepada penonton laman web kepada anda, sehingga menambahkan jalan keluar untuk kekecewaan yang berpotensi.

Merancang Laman Web Langkah 12
Merancang Laman Web Langkah 12

Langkah 4. Buat halaman 404 tersuai

Apabila seseorang mengunjungi halaman tertentu di laman web anda yang baik belum disiapkan atau tidak ada, halaman web "Ralat 404" akan dipaparkan. Sebilangan besar penyemak imbas mempunyai halaman 404 lalai, tetapi anda mungkin dapat menyesuaikan halaman anda dari dalam tetapan pencipta laman web anda; jika ya, pastikan anda memasukkan butiran berikut:

  • Mesej ralat ringan (mis. "Tahniah - anda telah menemui halaman ralat kami!")
  • Pautan kembali ke laman utama laman web
  • Senarai pautan yang biasa dilihat
  • Gambar atau logo untuk laman web anda
Merancang Laman Web Langkah 13
Merancang Laman Web Langkah 13

Langkah 5. Gunakan bar carian jika boleh

Sekiranya kaedah pembuatan laman web anda menyokong penambahan bar carian ke laman web anda, sangat disarankan agar anda melakukannya. Ini akan memastikan bahawa pengguna dapat menavigasi ke halaman atau item tertentu dengan cepat tanpa perlu mengklik pilihan navigasi anda.

Bar carian juga berguna apabila khalayak anda ingin mencari istilah umum tanpa menggunakan percubaan dan ralat

Merancang Laman Web Langkah 14
Merancang Laman Web Langkah 14

Langkah 6. Melaburkan sebahagian besar masa di laman utama anda

Apabila seseorang tiba di laman utama laman web anda, mereka harus segera mengetahui inti dari tema laman web anda; sebagai tambahan kepada semua ini, semua elemen halaman utama harus dimuat dengan cepat, termasuk pilihan navigasi dan sebarang gambar. Halaman utama anda harus mempunyai aspek berikut:

  • Ajakan bertindak (mis. Butang untuk diklik atau borang untuk diisi)
  • Bar alat atau menu navigasi
  • Grafik yang menarik (mis., Satu foto padat, video, atau sekumpulan kecil foto dengan teks yang disertakan)
  • Kata kunci yang berkaitan dengan perkhidmatan, topik, atau fokus laman web anda
Reka Laman Web Langkah 15
Reka Laman Web Langkah 15

Langkah 7. Uji laman web anda dalam pelbagai penyemak imbas di pelbagai platform

Ini sangat penting kerana penyemak imbas yang berbeza dapat menangani aspek laman web anda secara berbeza. Sebelum mula mempromosikan laman web anda, cuba lawati dan gunakan laman web anda di penyemak imbas berikut di platform Windows, Mac, iPhone, dan Android:

  • Google Chrome
  • Firefox
  • Safari (iPhone dan Mac sahaja)
  • Microsoft Edge dan Internet Explorer (hanya Windows)
  • Penyemak imbas terbina dalam pada beberapa telefon Android yang berbeza (mis. Samsung Galaxy, Google Nexus, dll.)
Reka Laman Web Langkah 16
Reka Laman Web Langkah 16

Langkah 8. Terus mengemas kini laman web anda seiring usia

Trend reka bentuk, pautan, foto, konsep, dan kata kunci semuanya berubah seiring berjalannya waktu, jadi anda harus terus membuat perubahan pada laman web anda untuk terus mengetahui. Ini memerlukan anda memeriksa prestasi laman web anda bersama laman web lain yang serupa sekurang-kurangnya sekali setiap tiga bulan (lebih baik lebih kerap).

Bantuan HTML asas

Image
Image

Contoh Halaman Web dengan HTML

Sokong wikiHow dan buka kunci semua sampel.

Image
Image

Lembaran Menipu HTML

Sokong wikiHow dan buka kunci semua sampel.

Image
Image

Contoh Laman Web Mudah

Sokong wikiHow dan buka kunci semua sampel.

Petua

  • Kebolehcapaian laman web adalah aspek penting lain dalam pembangunan laman web. Ini merangkumi perkara seperti kapsyen untuk khalayak bermasalah pendengaran, penerangan audio untuk pengunjung buta, dan amaran fotosensitiviti jika laman web anda menggunakan kesan yang berpotensi menyebabkan kejang.
  • Sebilangan besar pencipta laman web mempunyai sekumpulan templat yang boleh anda gunakan untuk menyusun susun atur dan reka bentuk laman web anda sebelum menambahkan elemen pilihan anda.

Amaran

  • Sebilangan besar pencipta laman web adalah percuma; namun, jika anda ingin menggunakan domain anda sendiri (mis., "www.yourname.com" dan bukannya "www.yourname.wordpress.com"), anda perlu membayar yuran bulanan atau tahunan.
  • Elakkan penipuan dan patuhi semua undang-undang hak cipta: jangan tambahkan gambar rawak dari web, atau bahkan elemen struktur, tanpa izin.

Disyorkan: