10 Elemen Penting Untuk Desain Sebuah Web

Elemen Penting Desain Web

Desain web, sama seperti fesyen, selalu berubah mengikuti perkembangan zaman. Ada trend yang sama sekali baru, ada pula yang merupakan pengulangan dari trend beberapa tahun ke belakang. Tapi, elemen-elemen esensial di dalamnya tidak banyak berubah.

Elemen 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).

Elemen #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.

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

Elemen #2: White Space

White space berguna untuk membantu mata manusia mengorganisasi data. Bagi Anda 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.

Fungsi ruang kosong (Lia Anggraini S. & Kirana Nathalia, 2014:82):

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

Tip:

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

Elemen #3: 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.

Tip:

• 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.

Elemen #4: 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.

Tip:

• 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.
• Jika Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu (grayscale).
• Hindari menggunakan warna-warna primer untuk latar: merah, biru, kuning. Ada jutaan gradasi warna di dunia ini, Anda bisa memilih satu di antaranya.
• 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.

Elemen #5: Navigasi

Navigasi ibarat denah atau petunjuk jalan yang memudahkan pembaca untuk mencari kategori konten atau produk apa pun yang mereka inginkan. Letakkan navigasi di tempat yang mudah ditemukan, juga pilih bentuk navigasi yang mudah digunakan agar pembaca betah berlama-lama di situs Anda. 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 Anda.
• Untuk pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan SATU baris navigasi.
• Gunakan menu dropdown untuk memisahkan antara subtopik dengan sub-subtopik.
• Anda bisa menggunakan navigasi linear atau navigasi hamburger.

Elemen #6: Tombol “Search”

Tidak ada yang lebih menyebalkan selain ketika berkunjung ke sebuah situs web dan tidak menemukan tombol search. Kita tidak akan pernah tahu apa yang ingin ditemukan oleh pembaca ketika datang ke situs web kita. 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 atau 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, Anda bisa menggunakan fitur Google custom search.

Elemen #7: Laman “About Me/Us”

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

• Memperkenalkan diri/perusahaan Anda.
• Memperkenalkan jasa/produk yang Anda miliki.
• Menjelaskan secara spesifik bidang yang Anda geluti.
• Membangun engagement dengan pembaca. Percaya atau tidak, pembaca lebih suka membaca tulisan dari seseorang yang dia “kenal” daripada dari penulis misterius.
• Jika Anda adalah blogger, laman “About Me” akan memudahkan calon klien menemukan informasi tentang siapa Anda.

Tip:

• Letakkan laman “About Me/Us” di navigasi agar mudah ditemukan.
• Laman “About Us” bisa dipergunakan untuk menceritakan visi dan misi perusahaan atau organisasi.
• Berikan informasi yang jelas dan tidak bertele-tele. Anda bisa menceritakan tentang siapa diri Anda, tapi hanya jika itu relevan atau berpengaruh terhadap citra diri yang ingin Anda tonjolkan. Tidak, tidak usah terlalu panjang, ini profil, bukan cerpen.
• Anda juga bisa memasukkan informasi yang berguna seperti prestasi, testimoni, atau seluruh akun media sosial. Kontak? Ya, Anda bisa memasukkan juga kontak di laman “About Me”.
• Foto? Well, ya, tentu saja boleh. Satu album? Tidak, gunakan satu saja dengan pose yang sekiranya membentuk citra diri Anda.
• Sejarah Anda ngeblog? Kalau Anda bisa menceritakan itu dalam satu paragraf berisi tidak lebih dari lima kalimat, silakan. Kalau cerita itu menghabiskan 500 kata, sebaiknya buat posttersendiri.
• Jika Anda adalah profesional, sertakan juga skill dan jasa yang Anda berikan. Ratecard? Nggg … sebaiknya tidak.

Elemen #8: Laman Kontak

Laman kontak berpengaruh terhadap autoritas. Pembaca dan klien tentu harus tahu apakah situs yang mereka kunjungi benar-benar dikelola oleh perusahaan atau orang asli, bukan fiktif. Laman kontak juga mempermudah mereka untuk menghubungi kita. Karena terus terang, seseorang yang sulit dihubungi sering kali membuat frustrasi.

Apa saja yang harus ada di laman kontak:

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

Elemen #9: 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.

Elemen #10: 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.

Tip:

• 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.
• Gunakan file PNG agar meskipun ukurannya dikompres, resolusi dan ketajaman warnanya tidak berubah.
• Akan lebih baik jika Anda menggunakan foto atau ilustrasi sendiri.
• 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.
• Gunakan foto yang relevan dengan konten.
• 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.
• 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.
• Anda yang menggunakan CMS WordPress bisa memanfaatkan plugin image editing untuk mengatur tampilan images.

*

Template apa pun yang Anda gunakan, CMS apa pun yang terbiasa Anda pakai, tampilan web tetap saja impresi pertama yang akan mengatakan siapa Anda, seberapa profesionalkah bisnis Anda, atau sampai di mana pengetahuan Anda tentang teknologi. Apakah Anda harus jago mendesain web untuk mempraktikkan poin-poin di atas? Tidak, tidak perlu. Elemen-elemen tersebut biasanya sudah bawaan template, kok. Anda hanya perlu mengeditnya sedikit-sedikit.

10 Elemen penting untuk desain sebuah web

Elemen Penting Desain Web

Desain web, sama seperti fesyen, selalu berubah mengikuti perkembangan zaman. Ada trend yang sama sekali baru, ada pula yang merupakan pengulangan dari trend beberapa tahun ke belakang. Tapi, elemen-elemen esensial di dalamnya tidak banyak berubah.

Elemen 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).

Elemen #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.

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

Elemen #2: White Space

White space berguna untuk membantu mata manusia mengorganisasi data. Bagi Anda 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.

Fungsi ruang kosong (Lia Anggraini S. & Kirana Nathalia, 2014:82):

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

Tip:

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

Elemen #3: 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.

Tip:

• 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.

Elemen #4: 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.

Tip:

• 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.
• Jika Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu (grayscale).
• Hindari menggunakan warna-warna primer untuk latar: merah, biru, kuning. Ada jutaan gradasi warna di dunia ini, Anda bisa memilih satu di antaranya.
• 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.

Elemen #5: Navigasi

Navigasi ibarat denah atau petunjuk jalan yang memudahkan pembaca untuk mencari kategori konten atau produk apa pun yang mereka inginkan. Letakkan navigasi di tempat yang mudah ditemukan, juga pilih bentuk navigasi yang mudah digunakan agar pembaca betah berlama-lama di situs Anda.

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 Anda.
• Untuk pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan SATU baris navigasi.
• Gunakan menu dropdown untuk memisahkan antara subtopik dengan sub-subtopik.
• Anda bisa menggunakan navigasi linear atau navigasi hamburger.

Elemen #6: Tombol “Search”

Tidak ada yang lebih menyebalkan selain ketika berkunjung ke sebuah situs web dan tidak menemukan tombol search. Kita tidak akan pernah tahu apa yang ingin ditemukan oleh pembaca ketika datang ke situs web kita. 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 atau 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, Anda bisa menggunakan fitur Google custom search.

Elemen #7: Laman “About Me/Us”

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

• Memperkenalkan diri/perusahaan Anda.
• Memperkenalkan jasa/produk yang Anda miliki.
• Menjelaskan secara spesifik bidang yang Anda geluti.
• Membangun engagement dengan pembaca. Percaya atau tidak, pembaca lebih suka membaca tulisan dari seseorang yang dia “kenal” daripada dari penulis misterius.
• Jika Anda adalah blogger, laman “About Me” akan memudahkan calon klien menemukan informasi tentang siapa Anda.

Tip:

• Letakkan laman “About Me/Us” di navigasi agar mudah ditemukan.
• Laman “About Us” bisa dipergunakan untuk menceritakan visi dan misi perusahaan atau organisasi.
• Berikan informasi yang jelas dan tidak bertele-tele. Anda bisa menceritakan tentang siapa diri Anda, tapi hanya jika itu relevan atau berpengaruh terhadap citra diri yang ingin Anda tonjolkan. Tidak, tidak usah terlalu panjang, ini profil, bukan cerpen.
• Anda juga bisa memasukkan informasi yang berguna seperti prestasi, testimoni, atau seluruh akun media sosial. Kontak? Ya, Anda bisa memasukkan juga kontak di laman “About Me”.
• Foto? Well, ya, tentu saja boleh. Satu album? Tidak, gunakan satu saja dengan pose yang sekiranya membentuk citra diri Anda.
• Sejarah Anda ngeblog? Kalau Anda bisa menceritakan itu dalam satu paragraf berisi tidak lebih dari lima kalimat, silakan. Kalau cerita itu menghabiskan 500 kata, sebaiknya buat posttersendiri.
• Jika Anda adalah profesional, sertakan juga skill dan jasa yang Anda berikan. Ratecard? Nggg … sebaiknya tidak.

Catatan: Laman “About Me” di atas hanya contoh. Kami memang sengaja tidak menggunakan foto asli untuk melindungi identitas staf kami dari serbuan para penggemar  . Ketika membuat laman “About Me”, tentu saja Anda harus menggunakan foto Anda sendiri. 

Elemen #8: Laman Kontak

Laman kontak berpengaruh terhadap autoritas. Pembaca dan klien tentu harus tahu apakah situs yang mereka kunjungi benar-benar dikelola oleh perusahaan atau orang asli, bukan fiktif. Laman kontak juga mempermudah mereka untuk menghubungi kita. Karena terus terang, seseorang yang sulit dihubungi sering kali membuat frustrasi.

Anda bisa meletakkan laman kontak di beberapa tempat: navigasi, header, footer.

Apa saja yang harus ada di laman kontak:

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

Elemen #9: 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.

Elemen #10: 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.

Tip:

• 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.
• Gunakan file PNG agar meskipun ukurannya dikompres, resolusi dan ketajaman warnanya tidak berubah.
• Akan lebih baik jika Anda menggunakan foto atau ilustrasi sendiri.
• 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.
• Gunakan foto yang relevan dengan konten.
• 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.
• 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.
• Anda yang menggunakan CMS WordPress bisa memanfaatkan plugin image editing untuk mengatur tampilan images.

Template apa pun yang Anda gunakan, CMS apa pun yang terbiasa Anda pakai, tampilan web tetap saja impresi pertama yang akan mengatakan siapa Anda, seberapa profesionalkah bisnis Anda, atau sampai di mana pengetahuan Anda tentang teknologi. Apakah Anda harus jago mendesain web untuk mempraktikkan poin-poin di atas? Tidak, tidak perlu. Elemen-elemen tersebut biasanya sudah bawaan template, kok. Anda hanya perlu mengeditnya sedikit-sedikit.

Kami cukupkan sekian bahasan tentang elemen penting desain web ini, semoga bermanfaat dan selamat praktik. Apabila ada saran tambahan atau pertanyaan, silakan tulis di kolom komentar atau hubungi Ninja Support Online kami yang akan bersedia membantu Anda selama 24 jam penuh.

5 Elemen yang dibutuhkan untuk membuat website

ELEMEN YANG DIBUTUHKAN UNTUK MEMBUAT WEBSITE

Elemen pertama yaitu  HTML, HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman  standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

Supaya  dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML.
HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut  Standard Generalized Markup Language (SGML).

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu : Membuat halaman web, Menampilkan berbagai informasi di dalam sebuah browser Internet, Dan membuat link menuju halaman web lain dengan kode tertentu (hypertext).

Elemen kedua yaitu CSS (Cascading Style Sheet), CSS 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.

CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web.

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.

Elemen ketiga yaitu PHP, PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang dikelola oleh The PHP Group.

Fungsi PHP Dalam Pemrograman Web Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa pemrograman yang wajib digunakan. Kita bisa saja membuat website hanya menggunakan HTML saja. Web yang dihasilkan dengan HTML (dan CSS) ini dikenal dengan website statis, dimana konten dan halaman web bersifat tetap.

Sebagai perbandingan, website dinamis yang bisa dibuat menggunakan PHP adalah situs web yang bisa menyesuaikan tampilan konten tergantung situasi. Website dinamis juga bisa menyimpan data ke dalam database, membuat halaman yang berubah-ubah sesuai input dari user, memproses form, dll.

Elemen keempat yaitu SQL, SQL adalah singkatan dari Structured Query Language. Sedangan pengertian SQL adalah suatu bahasa (language) yang digunakan untuk mengakses data di dalam sebuah database relasional. SQL sering juga disebut dengan istilah query, dan bahasa SQL secara praktiknya digunakan sebagai bahasa standar untuk manajemen database relasional. Hingga saat ini hampir seluruh server database atau software database mengenal dan mengerti bahasa SQL.

Dalam penggunaan SQL terdapat beberapa perintah yang berguna untuk mengakses dan memanajemen data yang terdapat dalam database. Jenis peringah SQL secara umum dibagi kepada tiga sub perintah, yaitu DDL (Data Definition Language), DML (Data Manipulation Language), dan DCL (Data Control Language). Ketiga sub perintah tersebut sangat perlu untuk dipahami bagi anda yang ingin menguasai bahasa sql dan mahir dalam pembuatan database.

Data Definition Language (DDL)

DDL adalah sub perintah dari bahasa SQL yang digunakan untuk membangun kerangka sebuah database, dalam hal ini database dan table. Terdapat tiga perintah penting dalam DDL, yaitu CREATE, ALTER, DROP.

CREATE: perintah ini digunakan untuk membuat, termasuk di dalamnya membuat database baru, tabel baru view baru, dan kolom baru.

Contoh: CREATE DATABASE nama_database

ALTER: perintah ALTER berfungsi untuk mengubah struktur tabel yang telah dibuat. Mencakup di dalamnya mengubah nama tabel, menambah kolom, mengubah kolom, menghapus kolom, dan memberikan atribut pada kolom.

Contoh: ALTER TABLE nama_tabel ADD nama_kolom datatype

DROP: perintah DROP berfungsi untuk menghapus database atau tabel.

Contoh: DROP DATABASE nama_database

Data Manipulation Language (DML)

DML adalah sub perintah dari bahasa SQL yang digunakan untuk memanipulasi data dalam database yang telah dibuat. Terdapat empat perintah penting dalam DML, yaitu INSERT, SELECT, UPDATE, dan DELETE.

INSERT: perintah ini digunakan untuk memasukkan data baru ke dalam sebuah tabel. Perintah ini tentu saja bisa dijalankan ketika database dan tabel sudah dibuat.

Contoh: INSERT INTO nama_tabel VALUES (data1, data2, dst…);

SELECT: perintah ini digunakan untuk mengambil dan menampilkan data dari tabel atau bahkan dari beberapa tabel dengan penggunaan relasi.

Contoh: SELECT nama_kolom1, nama_kolom2 FROM nama_tabel;

UPDATE: perintah update digunakan untuk memperbaharui data pada sebuah tabel.

Contoh: UPDATE nama_tabel SET kolom1=data1, kolom2=data2,… WHERE kolom=data;

DELETE: perintah delete digunakan untuk menghapus data dari sebuah tabel.

Contoh: DELETE FROM nama_tabel WHERE kolom=data;

Data Control Language (DCL)

DCL adalah sub bahasa SQL yang berfungsi untuk melakukan pengontrolan data dan server databasenya, seperti manipulasi user dan hak akses (priviledges). Yang termasuk perintah dalam DCL ada dua, yaitu GRANT dan REVOKE.

GRANT: perintah ini digunakan untuk memberikan hak akses oleh admin ke salah satu user atau pengguna. Hak akses tersebut bisa berupa hak membuat (CREATE), mengambil data (SELECT), menghapus data (DELETE), mengubah data (UPDATE), dan hak khusus lainnya yang berhubungan dengan sistem database.

REVOKE: perintah ini digunakan untuk mencabut hak akses yang telah diberikan kepada user. Dalam ini merupakan kebalikan dari perintah GRANT.

Elemen kelima  JavaScript, JavaScript adalah bahasa pemrograman yang ringan dan mudah untuk digunakan. Dengan adanya JavaScript ini, maka kini halaman web tidak sekedar menjadi  halaman data dan informasi saja, tetapi juga menjadi suatu program aplikasi dengan antarmuka web.

JavaScript merupakan bahasa pemrograman yang tidak membutuhkan lisensi untuk dapat menggunakanya. Jika browser web yang kita gunakan mendukung JavaScript, maka kita dapat langsung membuat aplikasi berbasis web dengan menggunakan JavaScript. JavaScript muncul sebagai jawaban atas tantangan dari pengakses web yang mengharapkan halaman web yang ditampilakan dapat lebih dinamis, tidak statis.

Fungsi JavaScript adalah salah satu bagian yang paling indah dari Javascript. Sebagai bahasa fungsional Javascript mengimplementasikan fungsi kelas pertama (first class function). Fungsi dapat disimpan dalam variabel, dikembalikan oleh fungsi lain, dan dikirimkan sebagai argumen untuk fungsi lainnya. Implementasi fungsi yang sangat fleksibel seperti ini membuka banyak kesempatan kepada pengembang untuk menuliskan kode yang bukan hanya berjalan dengan baik, tetapi juga sangat elegan dan indah.

Sebuah fungsi membungkus satu atau banyak perintah. Setiap kali kita memanggil fungsi, maka perintah-perintah yang ada di dalam fungsi tersebut dijalankan. Secara umum fungsi digunakan untuk penggunaan kembali kode (code reuse) dan penyimpanan informasi (information hiding). Implementasi fungsi kelas pertama juga memungkinkan kita menggunakan fungsi sebagai unit-unit yang dapat dikombinasikan, seperti layaknya sebuah lego. Dukungan terhadap pemrograman berorientasi objek juga berarti fungsi dapat kita gunakan untuk memberikan perilaku tertentu dari sebuah objek.