Point Penting Untuk membangun Design Website

Assalamualaikum Wr. Wb ..

Kali ini saya akan membahas tentang Point Penting Untuk Membangun Design Website, desain web bukan hanya agar web elok dipandang, tapi juga agar memudahkan pembaca dan Google Crawler ketika menjelajahi web kita. Dengan kata lain, meningkatkan user experience (UX). Berikut point pointnya :

1. LAYOUT

Layout sebuah situs web hendaklah mempertimbangkan letak penyusunan elemen-elemen desain yang memudahkan pembaca untuk mencerna aliran informasi. Perhatikan hierarki dan keseimbangan layout secara keseluruhan. Susunan paling umum adalah atas-bawah-kiri-kanan.

Tips:

• Buat susunan atau aliran informasi yang mudah diikuti oleh mata pembaca. 
• Susun elemen berdasarkan skala prioritas dari paling penting → penting → kurang penting. 
• Sebagian besar orang terbiasa membaca dari kiri ke kanan, maka letakkan main post di sebelah kiri sedangkan sidebar di sebelah kanan. 
• Perhatikan pula keseimbangan susunan elemen desain.

2. JENIS HURUF

Prinsip memilih huruf untuk web (web fonts) agak berbeda dengan ketika memilih huruf untuk materi cetak seperti brosur, pamflet, buku, atau materi cetak lainnya. Sebab ketika membaca di layar, mata manusia lebih cepat lelah daripada ketika membaca di atas kertas.
Berikut beberapa hal yang harus diperhatikan ketika memilih jenis huruf untuk web:

• Klasifikasi huruf. Kenali klasifikasi huruf dan karakternya masing-masing. Setidaknya ada 4 klasifikasi dasar huruf: serif, sans serif, script, dan dekoratif. 

1. Serif memberikan kesan klasik, resmi, dan elegan. Biasanya digunakan pada buku, surat kabar, dan konten formal atau semi formal. Contoh: Times New Roman (TNR), Garamond, Georgia, Cambria. 
2. Sans Serif adalah huruf yang paling cocok untuk digunakan karena memiliki tingkat readibility yang lebih tinggi di layar komputer jika dibandingkan dengan huruf serif. Memberikan kesan formal sekaligus kasual. Contoh: Helvetica, Arial, Trebuchet, Verdana, Josefin Sans. 
3. Script memiliki banyak sekali variasi (brush, handwriting, kaligrafi, dll), memberikan kesan klasik, santai, dan kasual. Karena karakternya yang seperti huruf tegak bersambung (well, ini memang huruf tegak bersambung), jenis huruf script lebih sulit dibaca di layar. Anda bisa menggunakan jenis huruf ini untuk judul post, tapi hindari menggunakannya untuk body text. 
4. Dekoratif, sama seperti script, huruf dekoratif juga memiliki banyak sekali variasi dari mulai yang betul-betul alfabet, simbol, hingga ikon-ikon tertentu. Huruf dekoratif tidak terlalu cocok digunakan untuk web fonts baik untuk judul maupun body text. Tapi, Anda bisa menggunakan huruf jenis ini untuk tulisan di image asalkan hanya untuk satu atau dua kata, bukan untuk kalimat panjang.

• Karakter. Huruf memiliki psikologinya sendiri-sendiri, pilih jenis huruf yang sesuai dengan karakter situs web atau produk Anda.
• Legibility. Adalah tingkat kemudahan mata mengenali suatu karakter/huruf tanpa harus bersusah payah (Lia Anggraini S. & Kirana Nathalia, 2014:64). Ada beberapa jenis huruf yang sulit dibaca sehingga pesan yang ingin disampaikan pun sulit diolah oleh pembaca, misalnya jenis-jenis huruf script atau dekoratif. Perhatikan contoh huruf di bawah, keduanya memakai jenis huruf yang sama, tetapi memiliki legibility yang berbeda. Kata pertama menggunakan tittle case atau kombinasi huruf besar dan kecil, sedangkan yang kedua memakai all capsatau kapital.
• Readibility. Readibility berkaitan dengan bentuk huruf dan hubungannya dengan huruf lain. Jenis huruf yang memiliki tinggi bervariasi lebih mudah dibaca daripada huruf yang memiliki tinggi sama. Readibility juga berhubungan dengan jarak antarhuruf dan jarak antarkata.
• Warna. Apa pun warna favorit Anda, entah itu merah, ungu, biru, atau merah muda, Anda tidak bisa begitu saja mengaplikasikannya ke dalam web fonts. Warna paling baik untuk body text adalah hitam atau gradasi abu-abu tua. Warna lain di dalam body text hanya dipergunakan untuk link atau subjudul. Judul? Boleh, Anda boleh memakai huruf berwarna-warni untuk judul atau judul sidebar, tapi pastikan warna yang Anda gunakan konsisten.
• Ukuran. Ukuran berpengaruh terhadap readibility. Dalam jarak dekat, mata manusia tidak bisa membaca huruf yang terlalu kecil juga huruf yang terlalu besar. Ukuran paling pas untuk body text biasanya antara 10-12px. Untuk judul, header, sidebar, dan elemen lainnya bisa Anda sesuaikan dengan bidang layout.
  
  Tips:
• Jenis huruf sans serif paling baik untuk digunakan di layar. 
• Gunakan MAKSIMAL 2 jenis huruf di dalam satu situs web. Anda bisa mengkombinasikan antara huruf serif dengan sans serif atau script dengan sans serif. Misalnya, Georgia untuk judul dan Helvetica untuk body text. 
• Gunakan variasi ukuran huruf untuk menandai skala prioritas aliran informasi. Misalnya, 12px untuk body text, 10 px untuk text snippet di sidebar, 8 atau 9px untuk footer. 
• Anda bisa memilih kombinasi huruf yang paling cocok di Google Fonts.

3. PILIHAN WARNA

Situs web bukan kanvas berisi lukisan abstrak, kita sedang menyampaikan informasi kepada pembaca, bukan sedang mendistraksi mata mereka. Yang terpenting dari situs web adalah konten, jangan sampai warna latar yang Anda gunakan lebih ramai dari konten itu sendiri.

Warna juga memengaruhi psikologi pembaca, menciptakan mood, bahkan menyelusup ke alam bawah sadar. Warna, bisa menyampaikan simbol dirinya sendirinya bahkan tanpa disertai oleh teks. Itu sebabnya mengapa pemilihan warna merupakan salah satu elemen penting dari desain sebuah web.

Tips:

1. Gunakan warna muda untuk latar dan warna tua untuk teks, bukan sebaliknya. Misalnya, latar putih atau abu-abu muda untuk latar dan hitam atau abu-abu tua untuk huruf body text. 
2. Jika Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu (grayscale).
3. Hindari menggunakan warna-warna primer untuk latar: merah, biru, kuning. Ada jutaan gradasi warna di dunia ini, Anda bisa memilih satu di antaranya. 
4. Pilih hanya SATU warna yang akan di-highlight. Untuk variasi, Anda bisa menggunakan warna lain tapi dengan tone yang sama atau gradasi dari warna utama.

4. KUALITAS IMAGE

Walau bagaimanapun, kita harus tetap mempertimbangkan aspek-aspek visual untuk memikat pembaca. Selain itu, ilustrasi dan foto memiliki fungsi untuk menjelaskan dan melengkapi konten.

Tips :

1. Gunakan foto atau ilustrasi dengan resolusi yang cukup agar tidak blur, minimal 150 PPI. Jika Anda belum familiar dengan ini, Anda bisa melihatnya di properties. Klik kanan image → properties → details. 
2. Gunakan file PNG agar meskipun ukurannya dikompres, resolusi dan ketajaman warnanya tidak berubah. 
3. Akan lebih baik jika Anda menggunakan foto atau ilustrasi sendiri. 
4. Jika Anda menggunakan foto dari stock images, pastikan Anda memakai foto gratis, bukan yang berlisensi seperti Shutterstock, Depositphotos, dll. Jika menggunakan dari penyedia images berbayar, pastikan Anda memang MEMBELINYA, bukan hanya mencomot begitu saja dari Internet lalu menggunakannya di blog Anda. Oh, dan tolong jangan coba-coba mengedit atau menghilangkan watermark-nya. 
5. Gunakan foto yang relevan dengan konten. 
6. Jika menggunakan foto dari situs web lain, sebutkan sumbernya berupa direct link, bukan hanya menyebutkan “Foto: Google”. Sebab Google adalah mesin pencari, bukan penyedia foto gratis. 
7. Jika Anda menggunakan foto sendiri dan ingin menggunakan watermark, gunakan watermark sewajarnya. Iya, itu foto Anda dan Anda tidak ingin siapapun mencurinya, tapi jangan sampai watermark mengganggu images secara keseluruhan. 
8. Anda yang menggunakan CMS WordPress bisa memanfaatkan plugin image editing untuk mengatur tampilan images.

Sekian bahasan tentang point penting membangun website tersebut, semoga bermanfaat dan selamat praktik. Maaf bila ada kekurangan dan kesalahan. Terimakasih 🙂

Elemen yang di Butuhkan Untuk Membangun Website

Assalamualaikum Wr. Wb ..

Haii semuaaaa kembali lagi nih di blog saya, kali ini saya akan membahas mengenai elemen-elemen dasar yang dibutuhkan bagi seseorang untuk membangun sebuah website. Ada 4 hal dasar yang kita ketahui dan kuasai untuk membangun sebuah website, yaitu :

1. HTML (HyperText Markup Language)

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Dan saya ingatkan HTML bukanlah merupakan suatu bahasa pemrograman melainkan hanya bahasa script.

2. CSS(Cascading Style Sheet)

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.
Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

3. PHP (Hypertext Preprocessor)
PHP yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. Fungsi PHP adalah untuk memberikan integrasi atau komunikasi antara user dengan website. Biasanya dipakai untuk membuat website agar lebih dinamis. Selain itu menggunakan bahasa PHP kita bisa terhubung dengan database.

4. JAVA SCRIPT
JAVA SCRIPT adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. Singkatnya Fungsi Java Script adalah untuk membuat integrasi antara user dengan web lebih baik lagi.


Biasanya model website ada dua macam yaitu:

1. Jika sebuah web di klik kemudian langsung beralih ke page lain, maka web tersebut menggunakan bahasa pemrograman PHP

2. Jika sebuah web di klik keluar halaman baru tapi masih tetap di page yang sama biasanya web tersebut sudah menggunakan bahasa pemrograman JAVA SCRIPT

Sekian artikel mengenai elemen-elemen dasar membangun web, semoga bisa bermanfaat. TerimaKasih :)