Web design bisa sangat sulit, karena melibatkan pencapaian desain yang usable (mudah digunakan) dan menyenangkan, memberikan informasi dan membangun brand, secara teknis terdengar dan terlihat koheren.

Faktanya bahwa banyak web desainer (termasuk saya sendiri) adalah otodidak, Web desain masih cukup baru untuk menjadi subjek sampingan di banyak institusi desain, dan media berubah sesering teknologi yang mendasarinya.

Jadi hari ini saya telah mengumpulkan 9 prinsip saya untuk desain Web yang bagus. Ini semua hanya pendapat saya dan saya sudah mencoba menghubungkan ke lebih banyak bacaan pada subjek-subjek sehingga anda tidak hanya mendengar suara saya. Jelas, saya memiliki banyak penyangkalan: peraturan dibuat untuk dilanggar, berbagai jenis desain bekerja secara berbeda, dan saya tidak selalu memenuhi harapan saya sendiri. Jadi tolong baca ini seperti yang dimaksudkan - hanya beberapa pengamatan yang kami bagikan.

1. Precedence (Mengarahkan Pandangan)

Desain Web yang bagus, bahkan mungkin lebih dari jenis desain lainnya, adalah tentang informasi.  Salah satu tools terbesar di gudang senjata anda untuk melakukan hal ini adalah precedence (prioritas). Saat bernavigasi pada sebuah desain yang bagus, pengguna harus diarahkan mengelilingi layar oleh designer yang bersangkutan. Saya menyebutnya precedence (prioritas), dan ini tentang berapa banyak bobot visual yang berbeda dari desain anda.

Contoh sederhana dari precedence adalah bahwa di sebagian besar situs, hal pertama yang anda lihat adalah logo. Hal ini sering terjadi karena logo itu besar dan sesuai dengan apa yang telah ditunjukkan dalam studi untuk menjadi tempat pertama yang dilihat orang (kiri atas). Ini adalah hal yang baik karena anda mungkin ingin pengguna untuk segera mengetahui situs apa yang mereka lihat.

Tapi precedence harus melangkah lebih jauh. Anda harus mengarahkan mata pengguna melalui serangkaian langkah. Misalnya, anda mungkin ingin pengguna anda beralih dari logo/brand ke primary positioning statement, di samping punchy image (untuk memberi kepribadian pada situs), lalu ke main body text, dengan navigation dan sidebar mengambil posisi sekunder dalam rentetannya.

Apa yang seharusnya pengguna anda lihat itu terserah pada anda, tugas Web designer untuk mencari tahu.

Untuk mencapai precedence anda memiliki banyak tools yang tersedia:

• Position (posisi) — Bila ada sesuatu yang jelas-jelas ada di halaman mempengaruhi urutan pengguna dalam melihatnya.
• Color (warna) — Menggunakan bold dan warna yang halus adalah cara mudah untuk memberitahu pengguna anda di mana mencarinya.
• Contrast (kontras) — Menjadi berbeda membuat segala sesuatunya menonjol, sementara hal yang sama membuat keduanya menjadi sekunder.
• Size (ukuran) — Besar lebih diutamakan dari yang kecil (kecuali jika semuanya besar, dalam hal ini yang kecil mungkin menonjol berkat Contrast)
• Design Elements (elemen desain) — jika ada panah raksasa yang menunjuk pada sesuatu, coba tebak ke mana pengguna akan melihatnya?

2. Spacing

Ketika saya pertama kali mulai mendesain, saya ingin mengisi setiap ruang yang tersedia dengan sesuatu. Space kosong tampak boros. Nyatanya justru itulah yang benar.

Spacing (ruang) membuat segalanya lebih jelas. Dalam desain web ada tiga aspek space yang harus anda pertimbangkan:

Line Spacing

Saat anda meletakkan teks, space di antara garis-garis itu secara langsung mempengaruhi seberapa terbacanya tulisan tersebut. Terlalu sedikit space membuat mata anda sulit untuk melepaskan diri dari satu baris ke baris berikutnya, terlalu banyak space berarti saat anda menyelesaikan satu baris teks dan menuju ke yang selanjutnya mata anda bisa saja tersesat. Jadi anda perlu mencari media pertengahan. Anda dapat mengontrol line spacing di CSS dengan selector 'line-height'. Umumnya saya menemukan nilai default yang biasanya terlalu kecil space-nya. Line Spacing secara teknis disebut leading (pronounced ledding), yang berasal dari proses yang digunakan printer untuk memisahkan baris pada teks di masa lalu, dengan menempatkan batang timbal di antara garis-garisnya.

Padding

Berbicara soal teks, umumnya tidak boleh bersentuhan dengan elemen lain. Image misalnya, tidak boleh menyentuh teks, tidak juga border atau table.

Padding adalah space atau ruang antara element dan text. Aturan sederhana di sini adalah bahwa anda harus selalu memiliki space di sana. Tentu saja ada pengecualian, khususnya jika teks itu semacam heading/graphic atau nama anda David Carson :-) Tapi sebagai aturan umum, menempatkan space antara teks dan jeda antara kata membuatnya jauh lebih mudah dibaca dan menyenangkan.

White Space

Pertama-tama, white space tidak harus berwarna putih. Istilah ini hanya mengacu pada ruang kosong pada halaman (atau negative space seperti yang kadang-kadang disebut). White space digunakan untuk memberi keseimbangan, proporsi dan kontras ke halaman. Banyak white space cenderung membuat segala sesuatunya tampak lebih elegan dan kelas atas, jadi misalnya jika anda pergi ke situs arsitek yang mahal, anda akan hampir selalu melihat banyak space. Jika anda ingin belajar menggunakan white space secara efektif, kunjungi majalah dan lihat bagaimana iklan ditata. Iklan dari brand besar jam tangan dan mobil dan sejenisnya cenderung memiliki banyak space kosong yang digunakan sebagai elemen desain.

3. Navigation

Salah satu pengalaman paling menjengkelkan yang biasa anda temukan di situs Web adalah tidak dapat menentukan ke mana harus menuju atau di mana anda berada. Saya ingin berpikir bahwa untuk sebagian besar designer Web, navigation (navigasi) adalah konsep yang telah berhasil kami kuasai, namun saya masih menemukan beberapa contoh yang sangat buruk di luar sana. Ada dua aspek navigation yang perlu diingat:

Navigation — Ke mana anda menuju?

Ada beberapa peraturan logis yang harus diingat di sini. Tombol untuk berkeliling situs harus mudah ditemukan, pada bagian atas halaman dan mudah dikenali. Mereka seharusnya terlihat seperti tombol navigasi dan dijelaskan dengan baik. Teks pada tombol harus cukup jelas menerangkan ke tempat di mana anda akan dibawa. Selain mengambil keputusan yang baik, penting juga untuk membuat navigation yang usable atau mudah digunakan. Misalnya, jika anda memiliki sub-menu rollover, memastikan seseorang bisa sampai ke item sub-menu tanpa kehilangan rollover itu penting. Demikian pula mengubah warna atau gambar pada rollover adalah feedback yang sangat baik bagi user.

Orientation — Di mana anda sekarang?

Ada banyak cara untuk bisa mengarahkan pengguna sehingga tidak ada alasan untuk tidak melakukannya. Di situs yang kecil, mungkin hanya masalah besar heading atau versi 'down' dari tombol yang sesuai di menu anda. Di situs yang lebih besar, anda bisa memanfaatkan bread crumb trails, sub-headings dan site map untuk benar-benar mengatasinya.

4. Design to Build

Hidup telah menjadi jauh lebih mudah karena desainer Web beralih ke layout CSS, namun sekarang masih penting untuk memikirkan bagaimana anda akan mem-build (membangun/membuat) situs anda saat masih berada di Photoshop. Pertimbangkan hal-hal seperti:

• Bisakah itu benar-benar dilakukan?

Anda mungkin telah memilih font yang menakjubkan untuk bagian body, tapi sebenarnya itu adalah font HTML standar? Anda mungkin memiliki desain yang terlihat indah namun lebarnya 1100px dan akan menghasilkan scroller horizontal untuk sebagian besar pengguna. Penting untuk mengetahui apa yang bisa dan tidak bisa dilakukan, karena itulah saya percaya semua designer Web sesekali juga harus membangun situs.

• Apa yang terjadi saat layar diubah ukurannya?

Apakah anda perlu untuk repeating background? Bagaimana mereka akan bekerja? Apakah disain berpusat atau rata kiri?

• Apakah anda melakukan sesuatu yang secara teknis sulit?

Bahkan dengan CSS positioning, beberapa hal seperti vertical alignment masih sedikit menyakitkan dan terkadang sebaiknya dihindari.

• Bisakah perubahan kecil dalam desain anda sangat bisa menyederhanakan bagaimana anda membuatnya?

Terkadang menggerakkan objek disekitar desain bisa membuat perbedaan besar dalam bagaimana anda harus mengkode CSS anda nanti. Secara khusus, ketika elemen desain saling silang, ia menambahkan sedikit kompleksitas untuk dibuat. Jadi jika desain anda memiliki, katakanlah tiga elemen dan setiap elemen benar-benar terpisah satu sama lain, itu akan sangat mudah untuk dibuat. Di sisi lain jika ketiganya saling tumpang tindih, mungkin masih mudah, tapi mungkin akan sedikit lebih rumit. Anda harus menemukan keseimbangan antara apa yang terlihat bagus dan perubahan kecil yang bisa mempermudah apa yang anda buat.

• Khususnya untuk situs besar, bisakah anda menyederhanakan segala sesuatunya?

Ada saat ketika saya biasa membuat image button untuk situs saya. Jadi kalau ada tombol download, misalnya saya akan membuat sedikit gambar download. Pada tahun terakhir ini, saya telah beralih menggunakan CSS untuk membuat tombol dan tidak pernah menggunakan hal itu lagi. Tentu, itu berarti tombol saya tidak selalu memiliki fleksibilitas yang mungkin saya inginkan, tapi penghematan waktu dalam pengembangan dari tidak harus membuat lusinan gambar tombol kecil yang sangat memakan waktu.

5. Typography

Teks adalah elemen desain yang paling umum, jadi tidak mengherankan jika banyak pemikiran telah dilakukan. Penting untuk mempertimbangkan hal-hal seperti berikut:

• Pilihan Font — Berbagai jenis font mengisyaratkan hal yang berbeda tentang desain. Beberapa terlihat modern, beberapa terlihat retro. Pastikan anda menggunakan tool yang tepat untuk pekerjaan tersebut.
• Ukuran Font — Beberapa tahun yang lalu suatu hal yang trendi untuk memiliki teks yang sangat kecil. Untungnya, belakangan ini orang mulai menyadari bahwa teks itu dimaksudkan untuk dibaca, tidak hanya dilihat. Pastikan ukuran teks anda konsisten, cukup besar untuk dibaca, dan proporsional sehingga heading dan sub-heading menonjol dengan tepat.
• Spacing — Seperti yang dibahas di atas, jarak antar garis dan jauh dari objek yang lain penting untuk dipertimbangkan. Anda juga harus memikirkan jarak antar huruf, meskipun dalam Web ini kurang penting, karena anda tidak memiliki banyak kontrol.
• Line Length — Tidak ada peraturan yang kuat dan cepat, namun umumnya teks anda tidak boleh terlalu panjang. Semakin panjang mereka, semakin sulit mereka dibaca. Kolom teks kecil bekerja lebih baik (pikirkan bagaimana sebuah surat kabar menjabarkan teks).
• Color — Salah satu kebiasaan terburuk saya adalah membuat teks dengan kontras yang rendah. Ini terlihat bagus tapi sayangnya tidak terbaca dengan baik. Namun, sepertinya saya melakukannya dengan setiap desain situs web yang pernah saya buat, he he he.
• Paragraphing — Sebelum saya mulai mendesain, saya suka men-justify teks dalam segala hal. Itu dibuat untuk sisi yang bagus di kedua sisi paragraf saya. Sayangnya, teks justify cenderung menciptakan kesenjangan aneh antara kata-kata di mana mereka berada dalam jarak otomatis. Ini tidak baik untuk mata anda saat membaca, jadi tetap pada rata kiri kecuali jika anda kebetulan mempunyai magic body pada text yang memungkinkan untuk jarak yang sempurna.

6. Usability

Desain web bukan hanya tentang gambar yang cantik. Dengan begitu banyak informasi dan interaksi yang harus dilakukan di situs Web, penting bagi anda, seorang designer, menyediakan semuanya itu. Yang itu berarti membuat desain situs Web anda bisa usable (dapat/mudah digunakan).

Kami telah membahas beberapa aspek usability - navigation, precedence, dan text. Berikut adalah tiga hal yang lebih penting:

• Mengikuti Standar

Ada beberapa hal yang orang harapkan, dan tidak memberikan mereka penyebab kebingungan. Misalnya, jika teks memiliki garis bawah, anda mengharapkannya itu bisa menjadi link. Melakukan sebaliknya bukanlah praktik usability yang baik. Tentu, anda dapat mematahkan beberapa kebiasaan umum, namun sebagian besar situs Web anda harus melakukan persis seperti yang diharapkan orang!

• Pikirkan tentang apa yang sebenarnya akan dilakukan oleh pengguna

Prototyping adalah tool yang umum digunakan dalam desain untuk benar-benar 'mencoba' sebuah desain. Hal ini dilakukan karena sering ketika anda benar-benar menggunakan sebuah desain, anda melihat hal-hal kecil yang membuat perbedaan besar. ALA memiliki artikel beberapa saat yang lalu yang disebut Never Use a Warning When You Mean Undo, yang merupakan sebuah contoh bagus dari keputusan desain small interface yang bisa membuat pengalaman pengguna menjadi menyebalkan.

• Pikirkan tentang user task

Ketika pengguna datang ke situs anda, apa yang sebenarnya mereka coba lakukan? Buat daftar berbagai jenis task (kegiatan) yang mungkin dilakukan orang di sebuah situs, bagaimana mereka akan memperolehnya, dan seberapa mudah anda ingin membuatnya untuk mereka. Ini mungkin berarti memiliki task yang benar-benar umum di homepage anda (misalnya 'mulai belanja', 'pelajari tentang apa yang kami lakukan', dll.) atau ini mungkin berarti memastikan bahwa sesuatu seperti memiliki search box selalu mudah untuk diakses. Pada akhirnya, desain Web anda adalah tool untuk digunakan orang, dan orang tidak suka menggunakan tool yang mengganggu!

7. Alignment

Menjaga hal-hal dalam lined up-nya (garisnya) adalah penting dalam desain Web seperti halnya pada desain cetak. Itu bukan untuk mengatakan bahwa segala sesuatu harus dalam satu garis, melainkan bahwa anda harus melakukan dan mencoba untuk menjaga hal-hal yang konsisten ditempatkan pada halaman. Aligning (penyelarasan) membuat desain anda lebih teratur dan mudah dicerna, sekaligus membuatnya tampak lebih dipoles.

Anda mungkin tentu juga ingin mendasarkan desain anda pada grid. Harus saya akui saya tidak melakukan ini secara sadar - meski jelas situs seperti Psdtuts+ sebenarnya memiliki struktur grid yang sangat kokoh. Tahun ini saya telah melihat beberapa artikel bagus tentang desain grid termasuk SmashingMagazine dengan Designing with Grid-Based Approach & A List Apart dengan Thinking Outside The Grid. Sebenarnya, jika anda tertarik dengan desain grid, anda pasti harus berkunjung ke home dari DesignByGrid.com untuk mempelajari semua tentang grid.

8. Clarity (Sharpness)

Menjaga desain anda tetap renyah dan tajam sangat penting dalam desain Web. Dan ketika sampai pada clarity (kejelasan), ini semua tentang pixel.

Dalam CSS anda, semuanya akan menjadi pixel sempurna sehingga tidak ada yang perlu dikhawatirkan, tapi di Photoshop tidak begitu. Untuk mencapai desain yang tajam anda harus:

• Menjaga bagian tepi shape untuk ke bentuk pixel. Ini mungkin diperlukan banyak shape, line, dan box jika anda membuatnya di Photoshop secara menual.
• Pastikan teks dibuat menggunakan pengaturan anti-aliasing yang sesuai. Saya sering menggunakan 'Sharp'.
• Memastikan bahwa kontrasnya tinggi sehingga begian border terlihat dengan jelas.
• Memberikan banyak penekanan pada bagian border hanya untuk memberikan kontras lebih.

9. Consistency

Consistency (konsistensi) berarti membuat semuanya match (pas atau sesuai). Ukuran Heading, pilihan font, pewarnaan, button style, spacing, elemen desain, illustration style, pilihan foto, dll. Semuanya harus bertema agar desain anda koheren antar halaman dan pada halaman yang sama.

Menjaga desain anda konsisten adalah tentang bersikap profesional. Ketidakkonsistenan dalam desain seperti kesalahan ejaan dalam sebuah esai. Hal tersebut hanya menurunkan persepsi kualitas. Apapun desain anda, membuatnya tetap konsisten akan selalu memberikan suatu peningkatan. Bahkan jika itu adalah desain yang buruk, setidaknya membuatnya menjadi desain buruk yang konsisten.

Cara termudah untuk menjaga konsistensi adalah membuat keputusan di awal dan tetap berpegang pada hal tersebut. Dengan situs yang sangat besar, hal-hal dapat berubah dalam proses desainnya. Ketika saya mendesain FlashDen misalnya, prosesnya memakan waktu berbulan-bulan, dan pada akhirnya beberapa gagasan saya tentang tombol dan gambar telah berubah, jadi saya harus kembali dan merevisi halaman sebelumnya agar sesuai dengan yang diinginkan.

Memiliki seperangkat stylesheet CSS yang bagus juga bisa mempemudah untuk membuat desain yang konsisten. Cobalah untuk mendefinisikan tag inti seperti <h1> dan <p> sedemikian rupa sehingga membuat default anda sesuai dengan benar dan hindari untuk membuat nama class tertentu setiap saat.