Perkara yang boleh dan tidak boleh dilakukan dalam reka bentuk web yang hebat

Apabila diikuti, panduan ini akan terbukti sebagai sumber reka bentuk web yang sangat berharga, terutamanya jika anda bercadang untuk menggunakannya perisian pembangunan laman web pada masa hadapan. Daripada yang tidak berpengalaman kepada yang berpengalaman, panduan ini mempunyai sesuatu untuk semua orang.

Proses Reka Bentuk Web yang Hebat Hanya untuk memastikan kita semua berada di halaman yang sama, mari kita mulakan dengan definisi asas untuk "reka bentuk web". Menurut Wikipedia, reka bentuk web ialah:

“satu proses pengkonsepan, perancangan, pemodelan, dan pelaksanaan penyampaian media elektronik melalui Internet dalam bentuk bahasa Penanda yang sesuai untuk tafsiran oleh pelayar Web dan paparan sebagai antara muka pengguna Grafik” .

Proses reka bentuk web boleh dibandingkan dengan proses menulis kertas penyelidikan. Dalam peringkat konsep/perancangan, carta alir (garis besar) dicipta yang menggambarkan struktur navigasi tapak web anda. Dalam peringkat pemodelan, bingkai wayar statik dicipta (draf kasar) yang menggambarkan reka letak rangka untuk setiap bahagian tapak web anda. Selepas bingkai wayar dibuat, grafik, warna dan teks digunakan untuk mencipta reka bentuk halaman web anda berdasarkan susun atur bingkai wayar. Dalam peringkat pelaksanaan, reka bentuk anda ditukar kepada format yang disokong oleh pelayar web, teks dan kandungan ditambah, dan akhirnya, tapak web anda diterbitkan secara langsung ke Internet untuk dilihat oleh dunia (draf akhir).

Ketiga-tiga peringkat proses reka bentuk adalah sama penting. Ramai pereka web melangkau satu peringkat untuk menjimatkan masa atau kerana mereka tidak fikir itu perlu. Walau bagaimanapun, ketiga-tiga peringkat adalah perlu jika matlamat anda adalah untuk mencipta reka bentuk yang berjaya dan tapak web yang dihormati. Walaupun ketiga-tiga peringkat itu digunakan, terdapat banyak kesilapan yang boleh dilakukan oleh pereka web yang akan membawa kepada tapak web yang tidak berkualiti dan tidak mesra pengguna. Sudah tiba masanya untuk membersihkan kabinet daripada amalan reka bentuk web yang buruk dan mengisinya semula dengan yang baik.

Peringkat 1: Pengkonsepan dan perancangan
Peringkat ini dilangkau lebih kerap daripada dua peringkat yang lain. Kebanyakan penulis tidak gemar membuat garis besar untuk kertas penyelidikan, dan kebanyakan pereka web juga tidak suka mencipta carta alir. Jangan malas. Jika anda berusaha dan merancang tapak web anda, maka anda akan mendapati proses reka bentuk web berjalan lancar dengan lebih sedikit kesilapan yang dilakukan sepanjang perjalanan.

Terdapat beberapa perkara yang anda perlukan untuk mengkonseptualisasikan dan merancang tapak web anda dengan berkesan:

• sebuah otak
• pen dan kertas
• (pilihan) perisian carta alir
• idea umum tentang bahagian berbeza tapak web anda

Untuk bermula, ambil pen dan kertas anda atau lancarkan perisian carta alir kegemaran anda. Kami menggunakan OmniGraffle Professiona untuk Mac OS X yang berharga $150 setiap lesen tetapi sangat berbaloi jika anda membuat tapak web secara tetap. Jika anda menggunakan PC, maka SmartDraw ialah perisian carta alir PERCUMA yang hebat yang boleh anda gunakan. Walau bagaimanapun, pen dan kertas berfungsi dengan baik.

Terdapat banyak kaedah untuk mencipta carta alir. Kami akan menunjukkan kepada anda cara paling asas untuk melakukannya demi masa dan panjang artikel ini. Jika anda ingin mengetahui lebih lanjut tentang carta alir cari carta alir di Google atau Yahoo.

Lihat carta alir yang kami cipta semasa mengkonseptualisasikan Tapak Kromatik. (1) Di bahagian atas carta alir kami menyenaraikan nama tapak web kami. (2) Seterusnya, kami menyertakan setiap bahagian utama tapak web kami: Laman Utama, Perihal dan Perkhidmatan. Bahagian ini adalah navigasi utama untuk tapak web anda. Nama setiap bahagian adalah bergantung sepenuhnya pada kandungan tapak web anda. Cuba gunakan sesedikit mungkin bahagian supaya pelawat anda tidak terharu apabila menavigasi laman web anda.

(3) Seterusnya, tambahkan semua halaman sekunder (subseksyen) yang akan disenaraikan pada setiap halaman utama. Untuk Laman Utama, kami telah menyertakan Reka Bentuk Web Profesional, Pembangunan Web dan Pengoptimuman Enjin Carian. Navigasi sekunder perlu lebih deskriptif daripada navigasi utama. Lebih mendalam hierarki navigasi tapak web anda, lebih deskriptif setiap label sepatutnya.

Dos

• Sedikit tetapi lebih dari cukup; pastikan bilangan bahagian utama pada tahap minimum. Kami menggunakan 6 bahagian di laman web kami yang lebih daripada mencukupi
• Sama ada anda menggunakan pen dan kertas atau perisian carta alir, pastikan perkara itu bersih dan teratur yang mungkin. Walaupun anda (dan sesiapa sahaja yang bekerja dengan anda) adalah satu-satunya yang akan menggunakan carta alir, ia masih perlu masuk akal -Bahagian utama anda harus menggunakan istilah yang lebih luas, manakala istilah sekunder dan tertiari harus lebih deskriptif

The Donts
Mencipta carta alir adalah agak lurus ke hadapan; namun, terdapat beberapa kesilapan yang boleh dilakukan dengan mudah:

• Jangan gunakan istilah yang sangat deskriptif dalam navigasi utama anda melainkan keseluruhan tapak web anda memfokuskan pada satu topik yang sempit -Jangan cuba dan gabungkan berbilang topik pada halaman yang sama. Buat bahagian umum untuk topik ini dan daripada bahagian itu buat subseksyen. Ini akan menjadikan halaman web subseksyen (deskriptif) lebih berkemungkinan mempunyai kedudukan yang lebih baik dalam enjin carian (Google, Yahoo, MSN, Ask) Sebaik sahaja anda telah mencipta carta alir yang ringkas dan deskriptif, anda sudah bersedia untuk meneruskan ke peringkat kedua proses reka bentuk web:

Peringkat 2: Permodelan
Dalam peringkat pemodelan, mock up statik "bingkai wayar" dibuat. Setiap mockup menggambarkan rangka kosong susun atur untuk setiap halaman web yang akan disertakan dalam tapak web anda. Peringkat ini penting kerana ia memberi kita idea di mana elemen berbeza akan diletakkan dalam reka bentuk kita. Beberapa elemen ini ialah:

• logo
• menu pelayaran
• kandungan
• imej, video

Untuk membuat mockup ini, anda boleh menggunakan pen dan kertas atau perisian mockup pilihan anda. Pada masa lalu kami telah menggunakan Photoshop, tetapi sejak kebelakangan ini kami telah menggunakan OmniGraffle Professional. OmniGraffle tidak intensif sumber seperti Photoshop dan ia membolehkan kami memasang mockup rangka wayar kami dengan lebih cepat.

Selain itu, pastikan anda mempunyai carta alir yang anda buat berdekatan kerana anda perlu merujuknya dari semasa ke semasa untuk memastikan anda mengejek semua halaman yang akan muncul di tapak web anda.

Berikut ialah contoh kami tentang cara mockup wireframe sepatutnya kelihatan. Seperti yang anda lihat, tiada warna atau grafik disertakan. Beginilah cara mockup rangka wayar sepatutnya - susun atur rangka reka bentuk anda. Tujuannya adalah untuk dapat mempunyai idea umum di mana setiap elemen halaman web akan diletakkan.

Kami biasanya bermula dari kiri atas dan turun ke bawah. Tiada cara khusus yang sepatutnya kelihatan pada rangka wayar. Gunakan imaginasi anda. Walau bagaimanapun, pastikan bahawa semasa membuat wireframe anda, anda tidak lupa untuk memasukkan elemen terpenting tapak web (logo, menu navigasi, peletakan kandungan, peletakan imej/video).

Jika sesetengah halaman anda akan menggunakan reka letak yang sama, maka anda tidak perlu mengejek semua halaman tersebut (walaupun anda pasti boleh). Pastikan anda membuat reka letak unik yang akan ada pada tapak web anda. Anda akan berterima kasih kepada diri sendiri kemudian.

The Do's

• mockup semua halaman unik
• sertakan elemen penting (logo, navigasi, peletakan kandungan, imej/peletakan video) -mulakan dari atas dan turun ke bawah -rujuk carta alir anda yang dibuat pada peringkat 1 untuk membuatkan anda tidak lupa memockup mana-mana halaman -simpan, simpan, simpan – seperti apa-apa sahaja pada komputer, simpan mockup anda setiap 10 minit atau lebih
• fokus pada susun atur yang bersih dan mesra pengguna -labelkan elemen anda supaya anda tidak lupa sifatnya apabila anda merujuknya pada peringkat 3, pelaksanaan -gunakan tapak web lain sebagai inspirasi; tidak ada yang salah dengan mengambil elemen dari tapak lain dan menjadikannya milik anda (lihat “jangan”)

The Dont's

• jangan sertakan grafik atau warna (itu untuk peringkat seterusnya) -jangan jadikan mockup anda terlalu "sibuk"; fokus pada susun atur yang bersih, teratur dan mesra pengguna -jangan langkau peringkat ini; ia sama pentingnya dengan yang pertama dan yang terakhir -jika anda mengambil elemen dari tapak web lain, pastikan anda tidak memplagiat; terdapat perbezaan antara diilhamkan oleh tapak web lain untuk mencipta elemen tertentu reka bentuk anda dan secara terang-terangan merobek reka letak dan warnanya

Peringkat 3: Perlaksanaan
Pada peringkat ketiga dan terakhir, pelaksanaan, perancangan dari peringkat 1 dan 2 digabungkan untuk membantu dalam mencipta laman web interaktif secara langsung.
Peringkat ketiga adalah setakat ini yang paling intensif masa kerana anda akan 1) mencipta grafik 2) mencipta kandungan, dan akhirnya, 3) menukar reka bentuk web daripada imej kepada kod yang pelayar web gunakan untuk membentangkan tapak web anda kepada dunia.

Apabila anda mencapai peringkat ketiga, anda harus mempunyai idea yang jelas tentang:

• bagaimana pelawat anda akan pergi dari satu tempat ke tempat lain (peringkat 1, carta alir) -cara halaman web anda akan dibentangkan (peringkat 2, mockup wireframe)

Jika anda tidak mempunyai idea yang jelas tentang dua perkara ini, kembali ke peringkat pertama dan kedua dan terus membangunkannya. Anda akan mendapati bahawa peringkat ketiga adalah paling mudah apabila anda telah membina pelan pertempuran yang jelas dan ringkas untuk mereka bentuk laman web anda.

Buang pen dan kertas
Pada peringkat 3, anda perlu menggunakan Photoshop atau program penyuntingan imej lain kerana anda akan menggunakan warna dan grafik untuk membuat reka letak untuk tapak web anda.

Kami biasanya mula membuat halaman "rumah" (indeks) terlebih dahulu. Gunakan bingkai wayar anda yang anda buat pada peringkat 2 sebagai templat untuk setiap halaman yang anda buat. Walau bagaimanapun, daripada menggunakan kotak pepejal, gunakan grafik, warna dan teks sebaliknya. Setiap halaman mesti betul-betul kelihatan seperti yang anda mahukan di Internet kerana ini adalah peringkat akhir proses reka bentuk.

Pastikan anda memasukkan latar belakang untuk navigasi anda (tetapi jangan tambahkan teks pada imej anda sebenarnya). Apabila ditukar menggunakan CSS (helaian gaya berlatarkan), navigasi anda hendaklah dalam bentuk teks dan bukan imej. Imej tidak boleh dirangkak oleh enjin carian (kata kunci yang digunakan dalam navigasi anda tidak akan diindeks dalam halaman hasil enjin carian, bermakna lebih sedikit orang akan dapat mencari tapak web anda).

Apabila anda berpuas hati dengan reka bentuk anda dan merasakan bahawa ia bersedia untuk diletakkan di Internet, sudah tiba masanya untuk memecahkan reka bentuk supaya anda boleh mencipta reka letak berasaskan CSS. Untuk mendapatkan maklumat lanjut tentang menukar reka letak anda kepada CSS atau menanda tapak web anda dalam CSS, lawati w3schools.com. Selepas melihat di Internet, kami tidak menemui tutorial imej-ke-CSS yang baik – jadi harapkan satu daripada kami dalam beberapa minggu akan datang. Menukar reka bentuk anda kepada CSS adalah sangat penting kerana susun atur jadual adalah perkara yang telah berlalu.

Berikut ialah contoh tapak web yang hampir siap bagi reka letak yang kami ejek pada peringkat 2. Ini diambil terus daripada pelayar web kami dan seperti yang anda lihat, kini terdapat logo, warna, sistem navigasi yang cantik, pengaki, dan yang paling penting, susun atur yang bersih dan teratur.
Terima kasih kepada perancangan di peringkat 1 dan 2, susun atur kami tersusun dengan baik dan mudah digunakan.

Dos

• rujuk templat anda yang telah dibuat pada peringkat 2; walaupun tidak mengapa untuk menyimpang daripada susun atur asal anda, anda tidak perlu melakukannya
• lakukan beberapa penyelidikan sebelum mencipta reka bentuk sebenar anda; dapatkan idea dari tapak lain dan jadikan idea itu sendiri (tanpa menciplak)
• sertakan warna dan grafik untuk mencipta rupa akhir untuk halaman web anda -gunakan CSS (helaian gaya berlatarkan) untuk menukar reka bentuk anda daripada imej kepada penanda yang boleh difahami oleh pelayar web -rujuk carta alir anda dari peringkat 1 apabila mengekod halaman anda dengan hiperpautan; adalah lebih baik untuk menggunakan menu lungsur turun yang merangkumi semua (atau sebahagian besar) pautan dalam tapak web anda pada setiap halaman; ini akan membolehkan navigasi lebih mudah dan juga menjadikan halaman anda lebih mudah untuk merangkak apabila labah-labah enjin carian singgah; tempat yang bagus untuk mendapatkan menu lungsur CSS ialah di DynamicDrive.com -memuktamadkan reka bentuk anda semasa bekerja dalam Photoshop atau apa sahaja perisian penyuntingan imej yang anda gunakan; sukar untuk membuat perubahan pada reka bentuk anda setelah ia ditukar menjadi markup (kod)

The Donts

• jangan masukkan teks dalam menu navigasi anda apabila menukar kepada CSS; daripada menggunakan teks imej, gunakan teks biasa yang boleh dibaca oleh labah-labah enjin carian
• jangan gunakan jadual semasa menukar; walaupun anda perlu membeli buku tentang CSS, ia akan berbaloi; meja sudah mati
• jangan melangkau dua peringkat pertama hanya untuk menjimatkan masa; laman web anda AKAN menjadi lebih baik jika anda bermula dari awal proses reka bentuk web (bukannya pada akhir)
• jangan lupa untuk memampatkan imej anda apabila ia dipotong untuk CSS; tidak ada yang lebih buruk daripada laman web yang memuatkan perlahan kerana fail imej yang besar; Photoshop mempunyai pilihan "Simpan Dioptimumkan Untuk Web" (CS3 - "Simpan untuk Web dan Peranti")

Proses Menjadi Sempurna
Dengan mengikuti proses reka bentuk web seperti yang digambarkan dalam artikel ini, anda meningkatkan peluang untuk mencipta tapak web yang teratur, mudah dilayari dan sangat mesra pengguna. Mari kita hadapinya – jika pelawat tersesat atau menjadi keliru semasa cuba melayari tapak web anda, mereka mungkin menekan butang belakang dan mencari tapak web yang lebih mesra pengguna. Orang ramai tidak suka berfikir apabila mencari jalan mereka di sekitar tapak web. Jangan buat mereka berfikir. Anda melakukan pemikiran dengan merancang laman web anda dari peringkat 1 hingga peringkat 3 dan anda akan mendapati bahawa lebih ramai orang akan menikmati melawati laman web anda.