Elemen- Elemen Penting Dalam Menentukan Desain Website

Membuat web desain pada prinsipnya hampir sama dengan membangun sebuah rumah sendiri. Web desain adalah sebuah bentuk grafis dalam membuat halaman web. Banyak yang masih belum tahu tentang pengertian web desain. Bahkan beberapa diantaranya masih melihat web desain hanya sebuah bentuk online jurnalisme saja. Seiring berkembangnya teknologi, internet memiliki nilai-nilai penting dari sebuah media. Maka dari itu, stiap detik akan bermunculan website di seluruh dunia. Dan disinilah web desain berperan. Untuk menciptakan website yang bagus, maka pahami dahulu tentang bagaimana cara membuat web desain. Web desain terdiri dari grafis, ataupun animasi digital dan bisa berbentuk apa saja yang dapat mendukung atau memperindah website. Web desain juga harus user friendly, karena tidak ingin pengunjung web dipusingkan dengan desain yang rumit dan tidak jelasnya informasi yang disampaikan. Sebelum mendesain tampilan website, pahami dahulu proses pengembangan website. Proses-proses yang harus dilalui meliputi konseptualisasi, membuat desain arsitek, organizing, implementing, maintaining, dan improvisasi hingga website berjalan.

1. Menentukan Kebutuhan Web

Ketahui fungsi dibuatnya website, menentukan target pengunjung, dan menentukan informasi serta konten yang disediakan. Tentukan juga tujuan dan milestone untuk pengembangan website.

2. Arsitektur Situs

Arsitektur situs yang baik akan mempermudah pengunjung menemukan informasi yang ingin dicari. Information architecture website akan menentukan interaksi dinamis antara bagian-bagian pokok website. Pada tahap ini akan menghasilkan cetak biru untuk pengembangan website.

3. Text-Only Site Framework

Selanjutnya siapkan kerangka situs. Hal-hal yang harus disiapkan adalah konten, sitemap, kerangka situs, dan navigasi

4. Desain Artistik dan Komunikasi Visual

Desain harus mengidentifikasikan identitas dan tujuan website. Desain akan memperlihatkan karakteristik situs. Maka, desain harus dibuat berdasarkan tujuan yang sebelumnya sudah ditentukan. Pada tahap ini, akan dibuat storyboards, page layout, dan homepage atau entry page.

5. Site Production

Kemudian memproduksi situs, mulai dari page templates, prototype page, client side programming, server side programming, hingga finished pages.

6. Error Checking dan Validation

Gunakan tools untuk memeriksa ejaan, link yang putus, atau masalah kode HTML. Jangan lupa untuk mencoba waktu loading halaman.

7. Testing dan Deploying

Mencoba membuka situs melalui berbagai jenis browser dan dari berbagai lokasi. Jika semua sudah terlaksana dengan baik, saatnya mengupload situs ke web. Buat URL untuk diketahui user dan daftarkan situs menggunakan mesin pencari.

8. Documentation dan Maintenance

Buat deskripsi website, fungsi serta desainnya. Tulis di memo atau Notepad untuk lokasi penempatan file-file sumber, baik desain atau programnya. Dan buat cara pemeliharaan website. Setelah mendokumentasikan konten-konten penting, lanjutkan dengan mengoperasikan situs.

Baca juga : Mengenal Pekerjaan Influencer Marketing

Elemen Penting Desain Web

Pada dasarnya, desain web adalah perjumpaan pertama antara pembaca dengan pemilik website. Semakin baik kesan yang didapat, maka konten  akan memiliki kesempatan yang lebih tinggi untuk sampai pada pembaca. Begitu pula dengan produk atau jasa yang di jual. 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 enak dipandang, namun juga agar memudahkan pembaca dan Google Crawler ketika menjelajahi web. Dengan kata lain, meningkatkan user experience (UX). Desain adalah proses membuat dan mengkomunikasikan gagasan dalam bentuk gambar atau visual. Tujuan adanya desain adalah untuk menciptakan suatu harmoni dan mencapai satu kesatuan. Elemen-elemen desain web yang dimaksud adalah logo, icon, blok teks, dan foto yang ada dalam suatu halaman web. Untuk lebih jelasnya, berikut akan dijelaskan elemen-elemen desain web:

1. Layout atau Tata Letak

Layout sebuah situs web harus mempertimbangkan letak penyusunan 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 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. Fungsi ruang kosong :

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

Tips:

• Gunakan ruang kosong dengan jarak yang sama antara satu elemen dengan elemen lainnya.
• 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 lainnya. Karena 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 cocokuntuk digunakan karena memiliki tingkat readibility yang lebih tinggi di layar komputer, 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 (huruf tegak bersambung), jenis huruf script lebih sulit dibaca di layar. Bisa menggunakan jenis huruf ini untuk judul post, namun hindari menggunakannya untuk body text.
4. Dekoratif, huruf dekoratif juga memiliki banyak variasi dari mulai alfabet, simbol, hingga ikon tertentu. Huruf dekoratif tidak terlalu cocok untuk web fonts baik judul atau body text. Namun bisa digunakan untuk tulisan di imagedengan hanya untuk satu atau dua kata saja.

• Huruf memiliki psikologinya sendiri-sendiri, pilih jenis huruf 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 ingin disampaikan sulit diolah pembaca, misalnya jenis-jenis huruf scriptatau dekoratif.
• 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. Readibilityjuga berhubungan dengan jarak antarhuruf dan jarak antarkata.
• Warna, tidak bisa begitu saja mengaplikasikan warna 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. Dan untuk judul atau judul sidebar, boleh memakai huruf berwarna-warni, tapi pastikan warna yang digunakan konsisten.
• Ukuran, akan berpengaruh terhadap readibility. Dalam jarak dekat, mata manusia tidak bisa membaca huruf yang terlalu kecil maupun 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.

Tips:

• 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.
• Bisa memilih kombinasi huruf yang paling cocok di Google Fonts.

Baca juga : Memahami Psikologi Marketing Untuk Meningkatkan Penjualan

4. Skema Warna Website

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

Tips:

• Gunakan warna muda untuk latar dan warna tua untuk teks, bukan sebaliknya. Misalnya, latar putih atau abu muda untuk latar dan hitam atau abu-abu tua untuk huruf body text.
• Jika 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, pilih satu di antaranya.
• Pilih hanya SATU warna yang akan di-highlight. Untuk variasi, bisa menggunakan warna lain tapi dengan toneyang sama atau gradasi dari warna utama.

5. Desain Navigas

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

Tips:

• Letakkan navigasi di bagian paling atas layout. Bisa di bawah atau di atas header.
• Kategorikan navigasi berdasarkan produk atau subtopik utama dari situs web.
• Untuk pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan satu baris navigasi.
• Gunakan menu dropdownuntuk memisahkan antara 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 diberikan, 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.

Tips:

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

Baca juga : Jenis-Jenis dan Tujuan Dibuatnya Malware

7. Desain Halaman About US

Jika bukan perusahaan besar, tidak memiliki jenis bisnis yang spesifik, bergerak di bidang bisnis baru/ bukan pemilik situs web yang 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 di “kenal” daripada dari penulis misterius.
• Bagi seorang blogger, laman “About Me” akan memudahkan calon klien menemukan informasi tentang siapa Anda.

Tips:

• Letakkan laman “About Me/Us” di navigasi agar mudah ditemukan.
• Laman “About Us” bisa digunakan untuk menceritakan visi dan misi perusahaan/ organisasi.
• Berikan informasi yang. Bisa menceritakan tentang diri pribadi, tapi hanya jika itu relevan atau berpengaruh terhadap citra diri yang ingin ditonjolkan. Dan tidak perlu terlalu panjang.
• Bisa juga memasukkan informasi yang berguna seperti prestasi, testimoni, atau seluruh akun media sosial. Bisa juga memasukkan kontak di laman “About Me”.
• Lampirkan satu foto dengan pose yang sekiranya membentuk citra diri.
• Bisa menceritakan sejarah selama membuat blog dalam satu paragraf berisi tidak lebih dari lima kalimat. Jika menghabiskan sampai 500 kata, sebaiknya buat post
• Bagi profesional, sertakan juga skilldan jasa yang diberikan.

8. Desain Halaman Kontak

Laman kontak berpengaruh terhadap autoritas. Pembaca dan klien harus tahu apakah situs yang dikunjungi benar dikelola oleh perusahaan atau orang asli, bukan fiktif. Laman kontak juga mempermudah untuk menghubungi pemilik situs. Karena, seseorang yang sulit dihubungi sering kali membuat frustrasi. Laman kontak bisa diletakkan 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).

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

Tetap mempertimbangkan aspek-aspek visual untuk memikat pembaca. Ilustrasi dan foto juga memiliki fungsi untuk menjelaskan dan melengkapi konten.

Tips:

• Gunakan foto atau ilustrasi dengan resolusi yang cukup agar tidak blur, minimal 150 PPI. Bisa dilihat di properties. Klik kanan image → properties → details.
• Gunakan file PNG agar meskipun ukurannya dikompres, resolusi dan ketajaman warna tidak berubah.
• Akan lebih baik jika menggunakan foto atau ilustrasi sendiri.
• Jika menggunakan foto dari stock images, pastikan memakai foto gratis, tidak berlisensi seperti Shutterstock, Depositphotos, dll. Jika menggunakan dari penyedia imagesberbayar, pastikan sudah membelinya, bukan asal mencomot begitu saja dari Internet lalu menggunakannya di blog. Dan jangan coba-coba mengedit/ menghilangkan watermark
• Gunakan foto yang relevan dengan konten.
• Jika menggunakan foto dari situs web lain, sebutkan sumbernya berupa direct link, bukan hanya menyebutkan “Foto: Google”. Karena 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 editinguntuk mengatur tampilan images.

11. Kesatuan dan Variasi

Sederhananya yaitu sebuah gabungan gambar. Gabungan elemen-elemen desain web seperti teks, grafis, dan shapes menjadi gambar yang disebut sebagai suatu harmoni. Hal penting untuk mencapai sebuah kesatuan adalah proximity, repetition, continuation. Tampilan secara keseluruhan harus dominan dari elemen-elemen desain web pembentuknya. Continuation merupakan suatu susunan yang terencana dari berbagai macam bentuk. Jika sebuah website menempatkan margin, jarak antar teks, dan jarak antara logo dengan headline secara konsisten, pengunjung akan lebih tertarik untuk menelusuri gambar dari atas ke bawah, dari satu sisi ke sisi lain. Mencapai suatu kesatuan dengan konsisten memang penting, namun tidak semua aspek harus seragam. Harus ada variasi lain untuk menambah daya tarik agar tidak terkesan monoton. Mendesain adalah sebuah proses kreatif.

Baca juga : Cara Backup Data Website dan Manfaatnya

12. Emphasis, Focal Pointd dan Hirarki

Ketika seorang pengunjung datang ke web, ia akan memulai customer journey dengan memilih sebuah titik mulai (starting point) untuk memperoleh kesan visual. Titik mulai atau starting point dalam desain disebut dengan titik focal (focal point), yang merupakan tempat paling menonjol dalam sebuah desain. Desainer biasa menggunakan isolasi, ukuran, dan nilai untuk membuat titik focal. Titik focal bisa berupa logo, headline atau gambar yang menyatakan sesuatu secara langsung mengenai suatu konten dalam web. Titik focal pada situs komersial biasanya adalah sebuah headline, nama perusahaan, logo, dan gambar lain yang akan membuat pengunjung menuju ke halaman informasi. Hirarki adalah urutan dari sesuatu yang dilihat oleh pengunjung, yang ditentukan oleh pentingnya dari masing-masing elemen dan pesan yang ingin disampaikan kepada pengunjung. Navigasi juga merupakan komponen penting dalam sebuah web, namun tidak harus ditekankan di setiap halaman. Sama seperti rambu-rambu jalan raya, mudah terlihat dan memberikan informasi yang efektif tanpa menguasai seluruh jalan raya.

13. Kontras dan Fungsinya

Kontras dalam desain adalah tampilan yang berlawanan. Komponen dasar dalam kontras adalah figure-ground relationship atau disebut dengan ruang positif dan negatif. Manfaat dasar dari adanya kontras adalah untuk membuat variasi visual suatu komposisi dan meningkatkan efek visual keseluruhan. Kontras pada layar komputer adalah untuk membantu mata membedakan elemen. Kontras juga bisa meningkatkan readability (keterbacaan) dan bisa membuat sebuah pesan terkesan lantang atau halus. Ukuran sebuah bentuk biasanya akan menarik perhatian. Foto dengan ukuran besar, layar besar, atau kapal yang besar akan menarik perhatian karena ukurannya. Sebaliknya, ukuran yang sangat kecil namun detail juga akan menarik perhatian. Itulah mengapa ukuran merupakan elemen desain web penting dalam desain visual website. Nilai adalah sarana lain untuk mengatur kontras. Yang berhubungan dengan tingkat kegelapan atau terang sebuah objek. Dalam seni desain, nilai juga bisa digunakan untuk membuat bentuk tiga dimensi atau untuk menunjukan sumber cahaya.

14. Typography

Typography adalah perpaduan antara seni dan teknik mengatur tulisan. Pengolahan tipografi tidak terbatas pada pilihan jenis huruf, ukuran, atau dekorasi. Tipografi juga mempertimbangkan adanya tata letak vertikal atau horizontal tulisan pada sebuah desain. Tipografi untuk web tidak sebebas tipografi untuk media cetak. Perancang desain web memiliki sedikit kebebasan untuk menentukan tipografi. Tidak semua jenis komputer pengguna memiliki spesifikasi yang sama. Perbedaan browser dan dukungan standar dalam CSS membuat tipografi web tidak memiliki bentuk jika tidak cocok untuk ditampilkan.

15. Elemen Keseimbangan

Keseimbangan ada dalam aturan kekontrasan visual. Desainer bisa saja membuat bentuk yang asimetris, namun juga harus membuat layout dengan teliti agar kesan seimbang tersebut tetap terlihat. Misalnya ketika seorang desainer ingin membuat bentuk yang asimetris, bentuk tersebut bisa dibuat dengan ukuran yang besar, kemudian diimbangi dengan menambahkan teks. Desainer harus bisa memastikan elemen utama tetap terlihat tanpa terganggu dengan bentuk yang asimetris. Cara sederhana lain untuk menyeimbangkan desain asimetris dalam web adalah memasangkan gambar dengan teks. Selain memasangkan gambar dengan teks, keseimbangan bisa didapat dari latar depan dan latar belakang, untuk menciptakan dinamika yang menarik, dimana latar belakang terlihat lebih fungsional sebagai bagian dari konten.

Baca juga : Strategi Menanggapi Customer Review

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 ?