Sekiranya anda ingin merancang dan membuat laman web, proses ini akan menjadi lebih mudah jika anda merancang lebih awal. Dalam fasa perancangan, pereka dan pelanggan dapat bekerjasama untuk mencari format dan susun atur yang sesuai dengan keperluan mereka. Proses perancangan mempengaruhi gaya atau gaya laman web, anda boleh mengatakan bahawa ini adalah aspek yang paling penting dalam reka bentuk web, terutama jika itu untuk tujuan perniagaan.
Langkah
Bahagian 1 dari 4: Membuat Struktur Asas
Langkah 1. Tentukan fungsi laman web
Sekiranya anda membuat laman web peribadi, anda mungkin sudah tahu jawapannya. Walau bagaimanapun, jika anda membuat laman web untuk organisasi, syarikat, atau orang lain, anda perlu mengetahui apa yang mereka mahukan dan fungsi laman web tersebut. Semua yang anda nyatakan di sini akan berlaku apabila halaman web selesai.
- Adakah laman web memerlukan Storefront? Sekiranya komen pengguna dibuat? Adakah pengguna perlu membuat akaun kemudian? Adakah artikel laman web berorientasikan? Atau berorientasikan imej? Semua soalan ini dan lain-lain akan membantu anda dalam merancang dan merancang laman web ini.
- Proses perancangan ini dapat digambar, terutamanya jika ia adalah untuk syarikat besar dan banyak orang terlibat dalam membuat projek ini.
Langkah 2. Buat rajah peta laman web (peta laman)
Gambarajah peta laman serupa dengan carta alir, yang menunjukkan bagaimana pengguna berpindah dari satu halaman ke halaman berikutnya. Anda tidak memerlukan laman web pada tahap ini, hanya aliran konsep umum. Anda boleh menggunakan program komputer untuk membuat gambar rajah atau membuat lakaran sendiri di atas kertas. Gunakan rajah ini untuk menunjukkan konsep susunan hierarki dan penyambungan halaman web.
Langkah 3. Cuba kaedah penggubalan kad
Salah satu kaedah pengembangan web kumpulan yang popular adalah menggunakan sebilangan kad untuk mengetahui harapan semua orang. Ambil sebilangan kad nota dan tuliskan isi asas laman web di setiap satu secara berasingan. Susun kad-kad ini bersama-sama dengan pasukan anda untuk mencari konsep terbaik. Kaedah ini sesuai digunakan semasa anda berkolaborasi dengan orang lain dalam membuat laman web.
Langkah 4. Gunakan kertas dan papan buletin, atau papan putih
Ini adalah kaedah perancangan asal dengan anggaran yang kecil, anda dapat dengan cepat menghapus atau mengalihkan kandungan dan mengubah aliran. Lukiskan reka bentuk web anda di atas kertas, kemudian sambungkan kertas dengan benang, atau lukis garis di papan. Kaedah ini sangat sesuai digunakan dalam sesi sumbang saran.
Langkah 5. Buat inventori kandungan
Sebenarnya ia lebih sesuai digunakan dalam merancang semula laman web daripada reka bentuk web baru. Masukkan setiap isi kandungan atau laman web yang sudah siap ke dalam spreadsheet. Catat tujuan setiap bahagian kandungan atau halaman, gunakan senarai ini untuk menentukan apa yang hendak dikeluarkan dan apa yang harus disimpan. Anda boleh mempermudah struktur web dan mempermudah proses reka bentuk semula kemudian.
Bahagian 2 dari 4: Membuat Garis Besar HTML Asas
Langkah 1. Buat rangka kerja untuk mewujudkan hierarki laman web
Templat HTML asas adalah cetak biru laman web yang akan anda bina, hanya menggunakan tag dan contoh (blok / templat) yang paling asas. Kerangka ini menjawab pertanyaan, "Apa yang terlihat di web dan di mana?" Pemformatan dan penggayaan tidak diperlukan dalam pembuatan garis besar ini.
- Anda dapat melihat struktur dan carta alir kandungan dengan garis besar asas sebelum memilih tetapan gaya.
- Templat HTML asas tidak statik seperti PDF atau gambar, anda boleh meleret kandungan sampel dengan cepat untuk membuat struktur baru.
- Kerangka asasnya adalah interaktif yang memberi manfaat kepada pemaju dan pelanggan web. Oleh kerana kerangka asas ini ditulis dengan kod HTML yang mudah, anda masih dapat menavigasi dan mengetahui bagaimana peralihan halaman web berfungsi. Ini tidak dapat dilakukan dengan PDF.
Langkah 2. Cubalah kaedah Kotak Kelabu
Sekat atau sorot kandungan laman web anda dalam Kotak Kelabu, kandungan paling penting ada di bahagian atas. Isih kandungan dalam satu lajur. Contohnya, jika halaman adalah "Tentang Syarikat", maka maklumat terperinci mengenai syarikat berada di bahagian atas, diikuti dengan senarai kakitangan, kemudian maklumat hubungan, dll.
Ini tidak termasuk header dan footer. Kotak Kelabu adalah gambaran visual kandungan yang akan muncul di web
Langkah 3. Cubalah program pembangun garis besar
Terdapat pelbagai program yang boleh anda gunakan dalam proses membuat kerangka web asas. Jumlah kod pengaturcaraan web (bahasa) yang perlu anda kuasai berbeza untuk setiap program. Beberapa program yang cukup popular termasuk:
- Makmal Corak. Laman web ini didedikasikan untuk "reka bentuk atom", setiap kandungan dianggap sebagai "molekul" yang menyusun laman web yang lebih besar.
- Carta Lompat. Laman web ini menyediakan perkhidmatan perancangan dan pembingkaian berasaskan web. Laman web ini dibayar dan memerlukan langganan, tetapi anda dapat membina kerangka web dengan cepat tanpa perlu menguasai banyak kod pengaturcaraan web.
- Wirefy. Wirefy adalah laman web lain yang menawarkan "reka bentuk atom". Pembangun web boleh mendapatkan alat ini secara percuma.
Langkah 4. Gunakan markup HTML yang mudah
Templat asas yang baik akan dengan mudah menukar ke laman web asal. Jangan terlalu memikirkan gaya web semasa proses membuat templat ini. Gunakan markup yang mudah difahami dan diubah.
Kerangka asas sederhana jauh lebih baik. Tujuan membuat markup adalah untuk membina struktur. Penampilan visual dapat disesuaikan kemudian dengan CSS dan markup lanjutan
Langkah 5. Buat garis besar asas untuk setiap laman web
Anda mungkin tergoda untuk menyamakan setiap laman web dengan satu garis besar asas. Sebenarnya, ini hanya akan menjadikan laman web anda jelas dan membosankan. Buat garis besar yang berbeza untuk setiap halaman, anda akan memahami bahawa setiap halaman memerlukan reka bentuknya sendiri.
Bahagian 3 dari 4: Membuat Kandungan
Langkah 1. Siapkan kandungan sebelum membuat laman web
Anda akan merasa lebih mudah untuk melihat pratonton laman web anda jika anda sudah mempunyai kandungan sebenar daripada menggunakan sampel atau ruang letak. Anda tidak perlu mempunyai terlalu banyak kandungan, tetapi maket anda akan kelihatan lebih baik jika anda menggunakan salinan gambar asal.
Anda tidak perlu memiliki semua bahan artikel, tetapi sekurang-kurangnya ia mesti mempunyai tajuk utama
Langkah 2. Ingat bahawa kandungan yang hebat bukan sekadar teks
Internet jauh lebih kompleks daripada laman web teks yang ringkas. Anda memerlukan pelbagai kandungan yang berbeza untuk membuat laman web yang menarik untuk menarik dan menjemput pengunjung. Sebagai contoh:
- Gambar.
- Suara.
- Video.
- Penghantaran web atau aliran web (Twitter)
- Integrasi Facebook
- RSS
- Suapan web
Langkah 3. Minta bantuan jurugambar profesional
Sekiranya anda ingin memasukkan foto di laman web anda, kesan pertama yang anda dapat dari laman web anda akan menjadi jauh lebih baik jika dipenuhi dengan fotografi profesional. Satu gambar bagus bernilai lebih daripada dua puluh gambar berkualiti rendah.
Carilah lulusan baru seni fotografi sebagai jalan penyelesaian yang lebih murah daripada jurugambar profesional yang telah lama menjalankan perniagaan ini
Langkah 4. Tulis artikel berkualiti
Kandungan tertulis di laman web akan menentukan jumlah lalu lintas web anda. Walaupun anda tidak perlu terlalu bimbang tentang pembuatan kandungan dalam proses reka bentuk ini, tidak ada salahnya untuk mula memikirkannya kerana anda juga memerlukan kandungan secara berkala setelah laman web anda beroperasi dan berjalan.
Selain kandungan artikel, ada bahan tertulis yang juga perlu anda miliki dalam proses menyusun laman web. Contohnya maklumat hubungan, nama syarikat, atau apa sahaja yang akan digunakan berkali-kali di laman web ini
Bahagian 4 dari 4: Mengubah Konsep Ke Laman Web
Langkah 1. Susun elemen asas
Susunan elemen ini berlaku untuk setiap halaman di laman web anda, seperti tajuk, nota kaki, dan menu navigasi. Siapkan dengan gaya yang sangat sederhana sehingga anda dapat memeriksa bagaimana semua halaman kelihatan. Ini sangat berguna semasa anda melangkah ke proses susun atur web.
Jangan terlalu bimbang tentang perinciannya, cuba lihat (pratonton) bagaimana tajuk itu kelihatan
Langkah 2. Buat susun atur yang mudah
Mulakan dengan mengalihkan kedudukan jam dari lajur garis dasar ke lokasi sebenar di halaman. Contohnya, anda mungkin mahu memindahkan contoh menu navigasi ke kiri halaman dan senarai tajuk utama ke kanan.
Terus bereksperimen dengan susun atur web untuk beberapa halaman, sebelum anda melangkah ke langkah seterusnya. Benarkan orang lain melihatnya untuk melihat apakah susun atur yang anda buat terasa hidup
Langkah 3. Buat mockup
Gunakan program seperti Photoshop untuk membuat maket atau contoh laman web anda. Gunakan susun atur yang telah anda susun sebagai panduan. Anda boleh membuat mockup lebih cepat dan mendapatkan hasil yang anda mahukan dengan program pemprosesan imej. Hasil gambar-gambar ini kemudiannya dapat dijadikan rujukan dalam proses penulisan kod pengaturcaraan web.
Masukkan isi sebenar dalam mockup agar kelihatan baik
Langkah 4. Gantikan konsep sampel dengan kandungan asal
Tambahkan kandungan dan elemen ke laman web. Jangan letakkan tetapan gaya web buat masa ini, tumpukan semuanya ke lokasi yang betul. Ini akan membantu anda mengkaji perubahan gaya web yang anda buat kemudian.
Langkah 5. Buat panduan gaya web
Sangat penting untuk mengekalkan gabungan gaya, terutama untuk laman web yang besar. Sekiranya laman web ini bertujuan untuk tujuan perniagaan dan sudah mempunyai jenama atau gaya tersendiri, ini harus disatukan ke dalam reka bentuk laman web. Perkara yang perlu dipertimbangkan semasa membuat panduan gaya halaman web:
- Navigasi
- Nota kepala
- Ayat
- Perwatakan miring
- Watak berani
- Pautan (aktif, tidak aktif, arahkan kursor)
- Penggunaan gambar
- Ikon
- Tombol
- senarai
Langkah 6. Terapkan gaya web
Sebaik sahaja anda menemui gaya dan reka bentuk yang tepat, laksanakan. CSS adalah salah satu cara termudah untuk menerapkan gaya di laman web atau di seluruh laman web. Lihat arahan berikut untuk lebih memahami perincian penggunaan CSS.
