Elemen Penting Sebuah Blog atau Website

Sebuah website tersusun dari komponen dan elemen dengan fungsinya masing-masing, lalu terkumpul dan saling berkaitan. Disadari atau tidak, desain web adalah yang pertama dilihat oleh pembaca. Semakin baik kesan yang didapat, maka konten akan memiliki kesempatan yang lebih tinggi untuk sampai pada pembaca. Begitu juga dengan produk atau jasa yang sedang dijual. Tampilan situs web juga berpengaruh terhadap SEO. Semakin SEO friendly dengan tampilan situs web, maka semakin tinggilah peringkat yang akan didapat. Elemen desain web bukan hanya agar web elok dipandang, tapi juga agar memudahkan pembaca dan Google Crawler ketika menjelajahi web. Dengan kata lain, meningkatkan user experience (UX).

Komponen Dasar

1. Title

Title adalah judul atau nama dari sebuah halaman web. Letaknya di titlebar browser.

2. Nama Domain

Nama domain adalah nama dari sebuah website. Sebenarnya, nama asli dari setiap website itu berupa IP address yang berupa nomor acak yang unik. Nama domain disewa dari pencatat/registrar domain per tahun. Domain digunakan agar sebuah website mudah untuk diingat. Kadangkala nama domain juga mewakili nama sendiri, nama brand, produk maupun perusahaan.

3. Alamat URL

URL singkatan dari Uniform Resource Locator. Jika sebuah halaman web diibaratkan dengan rumah, maka URL ini adalah alamat lengkap rumah. Letaknya ada di addressbar browser. Setiap Halaman web memiliki URL yang unik dan berbeda. Format URL bermacam-macam. Namun, semuanya selalu diawali dengan nama domain website atau blog tersebut.

4. Link/tautan

Jika diibaratkan halaman web adalah rumah, maka link atau tautan ini adalah pintu/ gerbang/ lorong yang menuju ke halaman lain, baik yang masih satu web ataupun halaman di web yang berbeda. Contoh Link : Pengarahan link diatur dalam kode html <a href=”alamat url halaman website tujuan”>Anchor teks/ Teks yang dilink</a>. (https://ezy.co.id/bahasa-pemrograman-javascript-js/)

5. Header

Header adalah bagian atas dari sebuah website. Biasanya berisi nama situs, logo dan deskripsinya. Header berfungsi untuk menampilkan identitas utama dari sebuah situs.

6. Konten/Isi

Konten adalah bagian terpenting dari sebuah blog atau website, yang berisi sebuah situs berupa informasi dan artikel yang biasanya terletak dibagian tengah. Artikel yang sedang dibaca ini juga adalah bagian dari konten. Konten di halaman utama sebuah blog biasanya adalah daftar posting.

baca juga : Elemen Penting Sebuah Blog atau Website

Elemen Penting Desain Web

1. Layout atau Tata Letak

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.

Tip:

• 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 postdi sebelah kiri sedangkan sidebar di sebelah kanan.
• Perhatikan pula keseimbangan susunan elemen desain.

2. White Space atau Ruang Kosong

White space berguna untuk membantu mata manusia mengorganisasi data. Bagi yang belum begitu familiar dengan istilah desain, white space bisa diartikan sebagai ruang kosong yang memisahkan antara satu elemen dengan elemen lainnya. Situs web adalah sebuah ruang berisi berbagai informasi, agar informasi itu dapat diolah dengan baik oleh mata pembaca, maka ruang kosong berfungsi sebagai jeda. Adapun Fungsi dari ruang kosong, yaitu:

• Berfungsi sebagai separator untuk setiap elemen desain.
• Memberi fokus terhadap elemen yang ingin ditonjolkan.
• Memberi kesan desain yang lebih cleandan relaxing.
• Menciptakan layoutyang lebih seimbang dan harmonis.
• Meningkatkan keterbacaan teks.

Tip:

• Gunakan ruang kosong dengan jarak yang sama antara satu elemen dengan elemen lain.
• White spacejuga termasuk jarak antarbaris dan antarparagraf dalam body text.

3. Pilihan Font

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

• Klasifikasi huruf.Kenali klasifikasi huruf dan karakternya masing-masing. Setidaknya ada 4 klasifikasi dasar huruf, yaitu:
  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 digunakan karena memiliki tingkat readibility yang lebih tinggi di layar komputer jika dibandingkan dengan huruf serif. Memberikan kesan formal serta kasual. Contoh: Helvetica, Arial, Trebuchet, Verdana, Josefin Sans.
  3. Script, memiliki banyak variasi (brush, handwriting,kaligrafi, dll), memberikan kesan klasik, santai, dan kasual. Karena karakternya yang seperti huruf tegak bersambung. jenis huruf  di halaman situs yang tertutupi warna hitam transparan lebih sulit dibaca di layar. Gunakan jenis huruf ini untuk judul post dan hindari menggunakannya untuk body text.
  4. Dekoratif, huruf yang dekoratif juga memiliki banyak variasi dari mulai alfabet, simbol, hingga ikon tertentu. Huruf dekoratif tidak terlalu cocok digunakan untuk web fonts baik untuk judul maupun body text.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, pilih jenis huruf yang sesuai dengan karakter situs web atau produk;
• Legibility, merupakan tingkat kemudahan mata mengenali suatu karakter/huruf tanpa harus bersusah payah. Ada beberapa jenis huruf yang sulit dibaca sehingga pesan yang disampaikan sulit dimengerti pembaca, misalnya jenis-jenis huruf scriptatau dekoratif.
• Readibility, berkaitan dengan bentuk huruf dan ada hubungannya dengan huruf lain. Jenis huruf yang memiliki tinggi bervariasi lebih mudah dibaca daripada huruf yang memiliki tinggi sama. Readibilityjuga berhubungan dengan jarak antar huruf dan jarak antarkata.
• Warna, aplikasikan 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. Boleh juga memakai huruf berwarna-warni untuk judul atau judul sidebar, tapi pastikan warna yang digunakan konsisten.
• 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 textbiasanya antara 10-12px. Untuk judul, header, sidebar, dan elemen lainnya bisa disesuaikan dengan bidang layout.

Tip:

• Jenis huruf sans serif paling baik untuk digunakan di layar.
• Gunakan maksimal 2 jenis huruf di dalam satu situs web. Kombinasikan antara huruf serif dengan sans serif atau scriptdengan 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.
• Pilih kombinasi huruf yang paling cocok di Google Fonts.

4. Skema Warna Website

Situs web bukan kanvas berisi lukisan abstrak, tapi informasi yang disampaikan kepada pembaca, dan bukan sedang mendistraksi mata mereka. Yang terpenting dari situs web adalah konten, jangan sampai warna latar yang digunakan lebih ramai dari konten itu sendiri. Warna juga mempengaruhi psikologi pembaca, menciptakan mood, bahkan menyelusup ke alam bawah sadar. Pemilihan warna merupakan salah satu elemen penting dari desain sebuah web. Warna bisa menyampaikan simbol dirinya sendirinya bahkan tanpa disertai oleh teks.

Tip:

• Gunakan warna muda untuk latar dan warna tua untuk teks,
• Jika tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu,
• Hindari menggunakan warna-warna primer untuk latar: merah, biru, kuning.
• Pilih stau warna yang akan di-highlight. Untuk variasi, gunakan warna lain dengan tone yang sama atau gradasi dari warna utama.

5. Desain Navigasi

Navigasi ibarat denah atau petunjuk jalan yang memudahkan pembaca mencari kategori konten atau produk yang diinginkan. Letakkan navigasi di tempat yang mudah ditemukan, pilih bentuk navigasi yang mudah digunakan agar membuat pembaca betah. Navigasi juga bertujuan seperti sistem kearsipan: mudah menyimpan dan menemukan data.

Tip:

• Letakkan navigasi di bagian paling atas layout. Bisa di bawah atau di atas header.
• Kategorikan navigasi berdasarkan produk atau subtopik utama dari situs web.
• Gunakan satu baris navigasi dan menu dropdownuntuk memisahkan subtopik dengan sub-subtopik.
• Gunakan navigasi linear atau navigasi hamburger.

6. Desain Tombol Pencarian (dan Tombol Lain)

Pemilik situs tidak akan pernah tahu apa yang ingin ditemukan oleh pembaca ketika datang ke situs web. Navigasi, kategori, dan label adalah opsi yang kita berikan, sedangkan tombol search adalah kebebasan. Pembaca tidak memiliki waktu yang cukup untuk mencari dari satu kategori ke kategori lain atau dari satu konten ke konten lain.

Tip:

• Letakkan tombol di tempat yang mudah dilihat, biasanya di sebelah navigasi/ di bawah header.
• Gunakan tombol berupa huruf atau simbol. Jika menggunakan simbol, hanya gunakan simbol lup yang merupakan simbol universal.
• Untuk pengalaman pengguna yang lebih baik, gunakan fitur Google custom search.

7. Desain Halaman About US

Baca juga : Bahasa Pemrograman JavaScript (JS)

Jika bukan perusahaan besar, tidak memiliki jenis bisnis yang spesifik, bergerak di bidang bisnis yang baru, atau bukan pemilik situs web yang sangat terkenal, laman “About Me/Us” memiliki beberapa fungsi:

• Memperkenalkan diri/perusahaan.
• Memperkenalkan jasa/produk yang dimiliki.
• Menjelaskan secara spesifik bidang yang digeluti.
• Membangun engagementdengan pembaca. karena pembaca lebih suka membaca tulisan dari seseorang yang dia “kenal” daripada dari penulis misterius.
• Untuk blogger, laman “About Me” akan memudahkan calon klien menemukan informasi tentang siapa pemilik situs.

Tip:

• Letakkan laman “About Me/Us” di navigasi agar mudah ditemukan.
• Bisa dipergunakan untuk menceritakan visi dan misi perusahaan atau organisasi.
• Berikan informasi yang jelas dan tidak bertele-tele, ceritakan tentang siapa pemilik situs, tapi hanya jika itu relevan atau berpengaruh terhadap citra diri yang ingin ditonjolkan.
• Masukkan informasi yang berguna seperti prestasi, testimoni, atau seluruh akun media sosial. Bisa memasukkan juga kontak di laman “About Me”.
• Gunakan satu foto dengan pose yang sekiranya membentuk citra diri pemilik situs.
• Ceritakan sejarah pembuatan blog sampai saat ini, jika bisa dimuat dalam satu paragraf berisi tidak lebih dari lima kalimat. Namun jika lebih dari 500 kata, sebaiknya buat post
• Untuk seorang profesional, sertakan skill dan jasa yang diberikan.

8. Desain Halaman Kontak

Laman kontak berpengaruh terhadap autoritas. Pembaca dan klien harus tahu apakah situs yang mereka kunjungi benar-benar dikelola oleh perusahaan/ orang asli, bukan fiktif. Laman kontak juga mempermudah untuk menghubungi pemilik situs. Karena, seseorang yang sulit dihubungi sering kali membuat frustrasi. Bisa meletakkan laman kontak di beberapa tempat, seperti navigasi, header, footer. Yang harus ada dilaman kontak, yaitu:

• Perusahaan: Alamat lengkap, jam operasional, nomor telepon, surel.
• Personal: Alamat (lengkap atau hanya nama kota), nomor telepon (opsional), surel.
• Form (opsional).

9. Desain Footer yang Informatif

Footer bisa saja berisi pengulangan informasi dengan catatan informasi tersebut memang krusial. Bisa juga berupa tambahan informasi berupa sitemaps, copyright, privacy policy, atau informasi lain yang memudahkan pembaca.

10. Kualitas Gambar pada Website

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

Tip:

• Gunakan foto atau ilustrasi dengan resolusi yang cukup agar tidak blur, minimal 150 PPI. Jika belum familiar dengan ini, bisa melihatnya di properties. Klik kanan image → properties → details.
• Gunakan file PNG, agar meskipun ukurannya dikompres, resolusi dan ketajaman warnanya tidak berubah.
• Akan lebih baik jika menggunakan foto atau ilustrasi sendiri.
• Jika menggunakan foto dari stock images, pastikan memakai foto gratis, bukan yang berlisensi. Jika menggunakan dari penyedia imagesberbayar, pastikan sudah membelinya, bukan hanya mencomot begitu saja dari Internet lalu menggunakannya di blog. Dan jangan coba-coba mengedit atau menghilangkan watermark-nya.
• Gunakan foto yang relevan dengan konten.
• Jika menggunakan foto dari situs web lain, sebutkan sumbernya berupa direct link, sebab Google adalah mesin pencari, bukan penyedia foto gratis.
• Jika menggunakan foto sendiri dan ingin menggunakan watermark, gunakan  sewajarnya, jangan sampai watermarkmengganggu images secara keseluruhan.
• Untuk yang menggunakan CMS WordPress bisa memanfaatkan plugin image editing untuk mengatur tampilan images.

Baca juga : Cara kerja CSS (Cascading Style Sheet)

Elemen yang sering ada di sebuah Blog/Website

1. Sidebar

Sidebar adalah bagian sisi kanan maupun kiri sebuah website dan terletak di sisi konten. Sidebar biasanya berisi informasi tambahan dan navigasi dari sebuah website. Sidebar diisi dengan widget-widget. Keberadaan sidebar ini bersifat opsional sesuai keinginan dan desain blog/web masing-masing. Ada blog yang hanya satu kolom (tanpa sidebar), ada yang hanya satu di sebelah kanan ataupun kiri, dan ada juga yang dikedua sisi memiliki sidebar.

2. Menu

Menu adalah bagian dari website yang berisi link-link utama yang mengarah pada halaman tertentu di sebuah website. Fungsinya hampir sama dengan navbar yaitu untuk mempermudah navigasi di web. Namun, teknisnya sedikit berbeda karena biasanya menu tidak melayang. Menu biasanya terletak di bawah atau di atas header.

3. Widget

Widget adalah sebuah daerah pada website yang isinya berupa informasi tertentu dan memiliki fungsi tertentu pula. Widget tidak harus terletak pada bagian sidebar. Widget juga bisa terletak pada bagian atas posting, footer bahkan header (walaupun sangat jarang).

4. Footer

Footer adalah bagian dasar atau paling bawah dari sebuah website. Fungsi utamanya adalah sebagai kaki dan berisi informasi hak cipta, kepemilikan, link tambahan, sumber daya, sponsor dan kredit sebuah website. Namun, kadang-kadang footer juga bisa dijadikan sebagai tempat untuk menampilkan widget.

5. Navbar

Navbar adalah kependekan dari Navigation bar, yang merupakan bagian website yang biasanya terletak di bagian paling atas dan bersifat melayang/fixed (Selalu terlihat walaupun di scroll). Navbar berfungsi untuk mempermudah navigasi sebuah situs. Biasanya berisi link-link penting yang mungkin dikunjungi dalam situs itu.

6. Form

Sebagaimana formulir kertas, form/formulir pada website juga berfungsi untuk penginputan data dari pengakses website baik itu yang bersifat wajib maupun opsional. Form pada website memiliki berbagai cara input seperti Textfield, Password, ComboBox, Textarea, Radio, Checkbox, Button dan lain-lain.

7. Sharing button bar (Bar tombol berbagi)

Sharing button bar adalah tempat dimana berbagai jenis tombol berbagi ke media sosial berada, yang berfungsi untuk membagikan posting ataupun isi pada halaman yang dikunjungi ke media sosial pengunjung. Tombol yang paling sering ada adalah tombol like facebook, tweet Twitter dan +1 Google+.

8. Popup

Popup adalah sebuah elemen pada website yang sifatnya hanya akan muncul/ada jika dikliknya sebuah tombol atau link tertentu pada website. Popup adalah sebuah jendela yang berisi informasi tertentu yang ingin disampaikan oleh pemilik situs. Ketika sebuah link popup diklik, akan muncul jendela popup, dan elemen lain di halaman website itu tidak akan berfungsi dan halaman situs akan tertutupi warna hitam transparan sebelum popup itu ditutup lagi.

9. Breadcrumb

Breadcrumb merupakan sebuah elemen website berbentuk memanjang yang isinya adalah informasi tentang letak, posisi dan atau jalur halaman yang sedang dikunjungi dalam website itu. Breadcrumb biasanya hanya ada di halaman spesifik/single seperti halaman posting dan sejenisnya. Biasanya terletak di atas judul posting. Format breadcrumb biasanya adalah “Beranda > Kategori Posting > Nama/judul Posting”.

Baca juga : Ide Bisnis di Bulan Ramadhan dan Momen Spesial untuk Bisnis Anda

Jika Anda pebisnis yang menjual produk/jasa apapun dan ingin meningkatkan penjualan bisnis, maka Anda perlu memiliki situs website toko online untuk mempromosikan produk. Anda dapat membuat website toko online di Jasa Pembuatan Website Toko Online Profesional. Dengan bantuan dari jasa pembuatan website akan membatu anda untuk mewujudkan situs website yang di dambakan.

Terimakasih dan semoga bermanfaat… Salam sukses untuk kita semua ?