Anjuran dan Larangan dalam Desain Web yang Hebat

Jika diikuti, panduan ini akan terbukti menjadi sumber desain web yang cukup berharga, terutama jika Anda berencana untuk menggunakannya perangkat lunak pengembangan situs web di masa depan. Dari yang belum berpengalaman hingga yang berpengalaman, panduan ini memiliki sesuatu untuk semua orang.

Proses Desain Web yang Hebat Hanya untuk memastikan kita semua mempunyai pemikiran yang sama, mari kita mulai dengan definisi dasar untuk “desain web”. Menurut Wikipedia, desain web adalah:

“suatu proses konseptualisasi, perencanaan, pemodelan, dan pelaksanaan penyampaian media elektronik melalui Internet dalam bentuk bahasa Markup yang sesuai untuk ditafsirkan oleh browser Web dan ditampilkan sebagai antarmuka pengguna grafis” .

Proses desain web dapat dibandingkan dengan proses penulisan makalah penelitian. Pada tahap konseptualisasi/perencanaan, diagram alur (garis besar) dibuat yang menggambarkan struktur navigasi situs web Anda. Pada tahap pemodelan, wireframe statis dibuat (draf kasar) yang menggambarkan tata letak kerangka untuk setiap bagian situs web Anda. Setelah bingkai kawat dibuat, grafik, warna, dan teks digunakan untuk membuat desain halaman web Anda berdasarkan tata letak bingkai kawat. Pada tahap eksekusi, desain Anda diubah ke dalam format yang didukung oleh browser web, teks dan konten ditambahkan, dan terakhir, situs web Anda dipublikasikan langsung ke Internet agar dapat dilihat dunia (draf akhir).

Ketiga tahapan proses desain sama pentingnya. Banyak desainer web melewatkan satu tahap untuk menghemat waktu atau karena mereka merasa hal itu tidak diperlukan. Namun, ketiga tahap tersebut diperlukan jika tujuan Anda adalah membuat desain situs web yang sukses dan terhormat. Bahkan jika ketiga tahapan tersebut digunakan, ada banyak kesalahan yang dapat dilakukan oleh desainer web yang akan menghasilkan situs web berkualitas buruk dan tidak ramah pengguna. Saatnya membersihkan lemari dari praktik desain web yang buruk dan mengisinya kembali dengan praktik yang baik.

Tahap 1: Konseptualisasi dan perencanaan
Tahap ini lebih sering dilewati dibandingkan dua tahap lainnya. Kebanyakan penulis tidak suka membuat garis besar untuk makalah penelitian, dan sebagian besar desainer web juga tidak suka membuat diagram alur. Jangan malas. Jika Anda berusaha dan merencanakan situs web Anda, maka Anda akan mendapati proses desain web berjalan lancar dengan lebih sedikit kesalahan yang dilakukan selama prosesnya.

Ada beberapa hal yang Anda perlukan untuk mengkonsep dan merencanakan situs web Anda secara efektif:

• otak
• pena dan kertas
• (opsional) perangkat lunak diagram alur
• gambaran umum tentang berbagai bagian situs web Anda

Untuk memulai, ambil pena dan kertas atau luncurkan perangkat lunak diagram alur favorit Anda. Kami menggunakan OmniGraffle Professiona untuk Mac OS X dengan biaya $150 per lisensi namun sangat bermanfaat jika Anda membuat situs web secara rutin. Jika Anda menggunakan PC, maka SmartDraw adalah perangkat lunak diagram alur GRATIS yang dapat Anda gunakan. Namun, pena dan kertas berfungsi dengan baik.

Ada banyak metode untuk membuat diagram alur. Kami akan menunjukkan kepada Anda cara paling dasar untuk melakukannya demi waktu dan panjang artikel ini. Jika Anda ingin mempelajari lebih lanjut tentang diagram alur, cari diagram alur di Google atau Yahoo.

Lihat diagram alur yang kami buat saat membuat konsep Situs Berwarna. (1) Di bagian atas flowchart kita mencantumkan nama website kita. (2) Selanjutnya, kami menyertakan setiap bagian utama situs web kami: Beranda, Tentang, dan Layanan. Bagian ini adalah navigasi utama untuk situs web Anda. Nama setiap bagian sepenuhnya bergantung pada konten situs web Anda. Cobalah untuk menggunakan bagian sesedikit mungkin sehingga pengunjung Anda tidak kewalahan saat menavigasi situs web Anda.

(3) Selanjutnya, tambahkan semua halaman sekunder (subbagian) yang akan dicantumkan pada setiap halaman utama. Untuk Rumah, kami telah menyertakan Desain Web Profesional, Pengembangan Web, dan Pengoptimalan Mesin Pencari. Navigasi sekunder harus lebih deskriptif daripada navigasi utama. Semakin dalam hierarki navigasi situs web Anda, setiap label harus semakin deskriptif.

Dos

• Kurang itu lebih; pertahankan jumlah bagian utama seminimal mungkin. Kami menggunakan 6 bagian di situs web kami yang lebih dari cukup
• Baik Anda menggunakan pena dan kertas atau perangkat lunak diagram alur, jagalah segala sesuatunya tetap bersih dan terorganisir mungkin. Meskipun Anda (dan siapa pun yang bekerja dengan Anda) adalah satu-satunya orang yang akan menggunakan diagram alur, diagram alur tersebut tetap harus masuk akal - Bagian utama Anda harus menggunakan istilah yang lebih luas, sedangkan istilah sekunder dan tersier harus lebih deskriptif

Donts
Membuat diagram alur cukup mudah; Namun, ada beberapa kesalahan yang mudah dilakukan:

• Jangan gunakan istilah yang sangat deskriptif dalam navigasi utama Anda kecuali seluruh situs web Anda berfokus pada satu topik sempit -Jangan mencoba menggabungkan beberapa topik pada halaman yang sama. Buatlah bagian umum untuk topik-topik ini dan dari bagian itu buatlah subbagian. Ini akan membuat halaman web subbagian (deskriptif) lebih mungkin memiliki peringkat yang lebih baik di mesin pencari (Google, Yahoo, MSN, Ask) Setelah Anda membuat diagram alur yang ringkas dan deskriptif, Anda siap untuk melanjutkan ke tahap kedua. dari proses desain web:

Tahap 2: Pemodelan
Pada tahap pemodelan, mock up “wireframe” statis dibuat. Setiap maket mengilustrasikan kerangka tata letak sederhana untuk setiap halaman web yang akan disertakan dalam situs web Anda. Tahap ini penting karena memberi kita gambaran di mana berbagai elemen akan ditempatkan dalam desain kita. Beberapa elemen tersebut adalah:

• logo
• menu navigasi
• Konten
• gambar, video

Untuk membuat maket ini, Anda dapat menggunakan pena dan kertas atau perangkat lunak mockup pilihan Anda. Dulu kita menggunakan Photoshop, namun belakangan ini kita menggunakan OmniGraffle Professional. OmniGraffle tidak membutuhkan banyak sumber daya seperti Photoshop dan memungkinkan kita merakit maket wireframe lebih cepat.

Selain itu, pastikan Anda memiliki diagram alur yang Anda buat di dekat Anda karena Anda perlu merujuknya dari waktu ke waktu untuk memastikan bahwa Anda meniru semua halaman yang akan muncul di situs web Anda.

Berikut adalah contoh kami tentang tampilan mockup wireframe. Seperti yang Anda lihat, tidak ada warna atau grafik yang disertakan. Seperti inilah seharusnya mockup wireframe – tata letak kerangka desain Anda. Tujuannya adalah agar dapat mempunyai gambaran umum tentang di mana setiap elemen halaman web akan ditempatkan.

Kami biasanya memulai dari kiri atas dan terus berlanjut hingga ke bawah. Tidak ada tampilan khusus pada wireframe. Gunakan imajinasimu. Namun, pastikan saat membuat wireframe Anda tidak lupa menyertakan elemen terpenting dari sebuah website (logo, menu navigasi, penempatan konten, penempatan gambar/video).

Jika beberapa halaman Anda menggunakan tata letak yang sama, maka tidak perlu meniru semua halaman tersebut (walaupun Anda pasti bisa). Pastikan untuk membuat tiruan tata letak unik apa pun yang dimiliki situs web Anda. Anda akan berterima kasih pada diri sendiri nanti.

The Do's

• maket semua halaman unik
• sertakan elemen penting (logo, navigasi, penempatan konten, penempatan gambar/video) -mulai dari atas dan terus ke bawah -referensi diagram alur yang Anda buat pada tahap 1 agar Anda tidak lupa membuat mockup halaman mana pun -simpan, simpan, simpan – seperti apa pun di komputer, simpan mockup Anda setiap 10 menit atau lebih
• fokus pada tata letak yang bersih dan ramah pengguna - beri label pada elemen Anda sehingga Anda tidak lupa apa elemen tersebut saat Anda mereferensikannya di tahap 3, eksekusi - gunakan situs web lain sebagai inspirasi; tidak ada salahnya mengambil elemen dari situs lain dan menjadikannya milik Anda sendiri (lihat “larangan”)

Jangan

• jangan sertakan grafik atau warna (itu untuk tahap selanjutnya) -jangan membuat maket Anda terlalu “sibuk”; fokus pada tata letak yang bersih, terorganisir dengan baik, ramah pengguna -jangan lewati tahap ini; ini sama pentingnya dengan yang pertama dan terakhir -jika Anda mengambil elemen dari situs lain, pastikan Anda tidak menjiplak; ada perbedaan antara terinspirasi oleh situs web lain untuk membuat elemen tertentu dari desain Anda dan secara terang-terangan meniru tata letak dan warnanya

Tahap 3: Eksekusi
Pada tahap ketiga dan terakhir, eksekusi, perencanaan dari tahap 1 dan 2 digabungkan untuk membantu pembuatan situs web yang hidup dan interaktif.
Tahap ketiga adalah yang paling memakan waktu karena Anda akan 1) membuat grafik 2) membuat konten, dan terakhir, 3) mengubah desain web dari gambar menjadi kode yang digunakan browser web untuk menampilkan situs web Anda kepada dunia.

Pada saat Anda mencapai tahap ketiga, Anda seharusnya sudah memiliki gambaran yang jelas tentang:

• bagaimana pengunjung Anda akan berpindah dari satu tempat ke tempat lain (tahap 1, diagram alur) -bagaimana halaman web Anda akan ditata (tahap 2, maket wireframe)

Jika Anda belum mempunyai gambaran yang jelas tentang kedua hal ini, kembalilah ke tahap pertama dan kedua dan terus kembangkan. Anda akan menemukan bahwa tahap ketiga paling mudah ketika Anda telah menyusun rencana pertempuran yang jelas dan ringkas untuk merancang situs web Anda.

Singkirkan pena dan kertas
Pada tahap 3, Anda harus menggunakan Photoshop atau program pengeditan gambar lainnya karena Anda akan menggunakan warna dan grafik untuk membuat tata letak situs web Anda.

Kami biasanya mulai membuat halaman “beranda” (indeks) terlebih dahulu. Gunakan wireframe yang Anda buat pada tahap 2 sebagai template untuk setiap halaman yang Anda buat. Namun, alih-alih menggunakan kotak padat, gunakan grafik, warna, dan teks. Setiap halaman harus terlihat persis seperti yang Anda inginkan di Internet karena ini adalah tahap akhir dari proses desain.

Pastikan untuk menyertakan latar belakang navigasi Anda (tetapi jangan benar-benar menambahkan teks ke gambar Anda). Saat dikonversi menggunakan CSS (cascading style sheet), navigasi Anda harus berbentuk teks dan bukan gambar. Gambar tidak dapat dirayapi oleh mesin pencari (kata kunci yang digunakan dalam navigasi Anda tidak akan diindeks di halaman hasil mesin pencari, yang berarti lebih sedikit orang yang dapat menemukan situs web Anda).

Ketika Anda puas dengan desain Anda dan merasa siap untuk dipublikasikan di Internet, inilah waktunya untuk memecah desain tersebut sehingga Anda dapat membuat tata letak berbasis CSS. Untuk informasi lebih lanjut tentang mengonversi tata letak Anda ke CSS atau menandai situs web Anda di CSS, kunjungi w3schools.com. Setelah mencari-cari di Internet, kami tidak dapat menemukan tutorial gambar-ke-CSS yang layak – jadi nantikan tutorialnya dari kami dalam beberapa minggu mendatang. Mengubah desain Anda menjadi CSS sangatlah penting karena tata letak tabel sudah ketinggalan zaman.

Berikut adalah contoh tata letak situs web yang hampir selesai yang kami contohkan di tahap 2. Ini diambil langsung dari browser web kami dan seperti yang Anda lihat, sekarang ada logo, warna, sistem navigasi yang cantik, footer, dan yang paling penting, tata letak yang bersih dan teratur.
Berkat perencanaan pada tahap 1 dan 2, tata letak kami tertata dengan baik dan mudah digunakan.

Dos

• referensi template Anda yang dibuat pada tahap 2; Meskipun menyimpang dari tata letak asli tidak masalah, Anda tidak perlu melakukannya
• lakukan riset sebelum membuat desain Anda yang sebenarnya; mendapatkan ide dari situs lain dan menjadikannya milik Anda sendiri (tanpa menjiplak)
• sertakan warna dan grafik untuk menciptakan tampilan akhir halaman web Anda - gunakan CSS (cascading style sheet) untuk mengubah desain Anda dari gambar menjadi markup yang dapat dimengerti oleh browser web - rujuk diagram alur Anda dari tahap 1 saat mengkode halaman Anda dengan hyperlink; lebih baik menggunakan menu tarik-turun yang mencakup semua (atau sebagian besar) tautan di situs web Anda di setiap halaman; ini akan memungkinkan navigasi lebih mudah dan juga membuat halaman Anda lebih mudah dirayapi ketika spider mesin pencari mampir; tempat yang bagus untuk mendapatkan menu tarik-turun CSS ada di DynamicDrive.com -selesaikan desain Anda saat bekerja di Photoshop atau perangkat lunak pengedit gambar apa pun yang Anda gunakan; mungkin sulit untuk membuat perubahan pada desain Anda setelah diubah menjadi markup (kode)

Donts

• jangan sertakan teks dalam menu navigasi Anda saat mengonversi ke CSS; daripada menggunakan teks gambar, gunakan teks biasa yang dapat dibaca oleh spider mesin pencari
• jangan gunakan tabel saat mengonversi; bahkan jika Anda perlu membeli buku tentang CSS, itu akan sia-sia; tabel sudah mati
• jangan melewatkan dua tahap pertama hanya untuk menghemat waktu; website Anda AKAN lebih baik jika Anda memulai dari awal proses desain web (bukan di akhir)
• jangan lupa untuk mengompres gambar Anda saat dipotong untuk CSS; tidak ada yang lebih buruk daripada situs web yang memuat lambat karena file gambar besar; Photoshop memiliki opsi “Simpan Dioptimalkan Untuk Web” (CS3 – “Simpan untuk Web dan Perangkat”)

Proses Menjadi Sempurna
Dengan mengikuti proses desain web seperti yang diilustrasikan dalam artikel ini, Anda meningkatkan peluang membuat situs web yang terorganisir dengan baik, mudah dinavigasi, dan sangat ramah pengguna. Jujur saja – jika pengunjung tersesat atau bingung saat mencoba menjelajahi situs web Anda, mereka mungkin akan menekan tombol kembali dan mencari situs web yang lebih ramah pengguna. Orang-orang tidak suka berpikir ketika harus mencari jalan di sekitar situs web. Jangan membuat mereka berpikir. Anda melakukan pemikiran dengan merencanakan situs web Anda dari tahap 1 hingga tahap 3 dan Anda akan menemukan bahwa lebih banyak orang akan senang mengunjungi situs web Anda.